第一个错误：

Question

我有几个无法解决的问题。

原始代码段：

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

…..export class MyClass {

readonly breakpointsToColumnsNumber = new Map([
    ['xs', 1],
    ['sm', 2],
    ['md', 3],
    ['lg', 4],
    ['xl', 5],
  ]);

constructor(private media: ObservableMedia ) {
  this.columns$ = this.media.asObservable().pipe(map(mc => <number>this.breakpointsToColumnsNumber.get(mc.mqAlias)));

}

现在，移至Angular 8后，ObservableMedia已弃用，现在是

MediaObserver

所以我将导入行和传递给构造函数的对象类型更改为此：

import { MediaObserver } from '@angular/flex-layout';

constructor(private media: MediaObserver)…

现在我遇到2个错误：

声明新的MAP：找不到“地图”。您是否需要更改目标库？请尝试将lib编译器选项更改为es2015或更高版本。（在我的tsconfig文件中，我将`lib'设置为es2017和dom，但是即使添加es2015也不会删除它。

Lambda mc.mqAlias出现第二个错误：类型'MediaChange []'不存在属性'mqAlias'-在新对象上，我看不到任何类似的东西。

Answer 1

第一个错误：

您可能会丢失

lib.es2015.collection.d.ts

lib 文件夹中的

文件。

第二个错误：

在这种情况下， asObservable（）方法将 MediaChange [] 类型传递到mc上。为了访问mqAlias属性，您需要确保mc的类型为 MediaChange 。您可以通过使用 media $ 代替 asObservable（）来实现。您的代码可能最终看起来像这样：

import { MediaObserver } from '@angular/flex-layout';

    ...

constructor(private media: MediaObserver) {
    this.columns$ = this.media.media$.pipe(map(mc => <number>this.breakpointsToColumnsNumber.get(mc.mqAlias)));
    }

而且由于media $映射到 MediaChange [] 数组中的第一项，所以您也可以使用以下代码：

this.columns$ = this.media.asObservable()
    .pipe(
        map(mc => <number>this.breakpointsToColumnsNumber.get(mc[0].mqAlias))
);

使用@ angular / flex-layout中的ObservableMedia从Angular 7移至8

1 个答案:

第一个错误：

第二个错误：