使 Angular Material 网格响应（再次）

Question

Angular material 网格没有响应，它的列在模板中设置 and/or 您可以设置一个变量并具有属性绑定。我正在尝试使用后一种方法，我有

public cols: Observable;

我根据不同的 window 中断编写的变量。我正在关注 this 文章并已类似地设置了我的代码。但是，我的 .map 函数显示为 unresolved

    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";

但这会引发错误，我假设这是由于 angular 6.

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

Answer 1

RxJS v5.5.2+ 已移至 Pipeable 运算符以改进 tree shaking 并使其更容易创建自定义运算符。现在operators需要用pipe的方法组合
Refer This
新导入

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));

使 Angular Material 网格响应（再次）

Make Angular Material Grid Responsive (again)

grid

flexbox

angular-material

angular

angular-material-5