时间戳

首页 > 解决方案 > 使 Angular Material Grid 响应式（再次）

angular - 使 Angular Material Grid 响应式（再次）

问题描述

角度材质网格没有响应，它的列在模板中设置和/或您可以设置变量并具有属性绑定。我正在尝试使用后一种方法，我有

公共cols：可观察的；

我根据不同的窗口中断过度编写的变量。我正在关注这篇文章并以类似的方式设置了我的代码。但是，我的 .map 函数出现未解决 

    ngOnInit(){
        const grid = new Map([
            ["xs", 1],
            ["sm", 2],
            ["md", 2],
            ["lg", 3],
            ["xl", 3]   ]);   let start: number;   grid.forEach((cols, mqAlias) => {
            if (this.observableMedia.isActive(mqAlias)) {
              start = cols;
            }   });   
  this.cols = this.observableMedia.asObservable().map(change => {
              console.log(change);
              console.log(grid.get(change.mqAlias));
              return grid.get(change.mqAlias);
            })
            .startWith(start);
    }

我的进口是

import { ObservableMedia } from '@angular/flex-layout';
import { Observable } from "rxjs";
import { map, startWith } from 'rxjs/operators';

我也尝试过导入

import "rxjs/add/operator/map";
import "rxjs/add/operator/startWith";

但这会引发错误，我假设它是由于角度 6 造成的。

关于为什么 .map 函数未定义以及为什么我不能动态更改cols变量值的任何帮助？

标签： angularflexboxgridangular-materialangular-material-5

解决方案

RxJS v5.5.2+已迁移到Pipeable运算符以改进 tree-shaking 并更容易创建自定义运算符。现在operators需要使用Refer This New Importpipe的方法进行组合

import { map} from 'rxjs/operators';

例子

myObservable
  .pipe(filter(data => data > 8),map(data => data * 2),)
  .subscribe(...);

修改后的代码

 this.observableMedia.asObservable().pipe(map(change => {
              console.log(change);
              console.log(grid.get(change.mqAlias));
              return grid.get(change.mqAlias);
            }),startWith(start));

推荐阅读