Сделать угловой материал сетки отзывчивым (снова) - PullRequest
Новая
       29

Сделать угловой материал сетки отзывчивым (снова)

0 голосов
/ 29 мая 2018

Угловая сетка материала не отвечает, и ее столбцы задаются в шаблоне, и / или вы можете установить переменную и иметь привязку свойства.Я пытаюсь использовать последний подход, когда у меня есть переменная

public cols: Observable;

, которую я перезаписываю на основе различных разрывов окна.Я следую этой статье и настроил свой код примерно так же.Но моя .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 ?

1 Ответ

0 голосов
/ 29 мая 2018

RxJS v5.5.2+ перемещено в Pipeable операторов для улучшения встряхивания дерева и упрощения создания пользовательских операторов.Теперь operators необходимо объединить, используя метод pipe
. См.
Новый импорт 

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