角度键值管道：参数类型不可分配给参数类型

Question

我想迭代一个地图并在我的 html 文件中显示键和值，为此我使用了 Angular 的 *ngfor 和键值管道。

但是，ngFor 迭代存在错误：

参数类型 Map<string, BarcodeInfoModel> 不可分配给参数类型 {[p: string]: (() => IterableIterator) | ((key: string, value: BarcodeInfoModel) => this) | ((key: string) => boolean) | 字符串 | ((key: string) => (BarcodeInfoModel | 未定义)) | (() => IterableIterator<[string, BarcodeInfoModel]>) | 数量 | (() => IterableIterator) | (() => 无效) | ((callbackfn: (value: BarcodeInfoModel, key: string, map: Map<string, BarcodeInfoModel>) => void, thisArg?: any) => void)} | Map<string, (() => IterableIterator) | ((key: string, value: BarcodeInfoModel) => this) | ((key: string) => boolean) | 字符串 | ((key: string) => (BarcodeInfoModel | 未定义)) | (() => IterableIterator<[string, BarcodeInfoModel]>) | 数量 | (() => IterableIterator) | (() => 无效) | ((callbackfn: (value: BarcodeInfoModel, key: string, map: Map<string, BarcodeInfoModel>) => void, thisArg?: any) => void)>

这里 Map 被声明和初始化，private files: Map<string, BarcodeInfoModel> = new Map<string, BarcodeInfoModel>();whereBarcodeInfoModel是自定义类型，变量如下：

export class BarcodeInfoModel {
    _codeType: string;
    _receivingID: string;
    _cache: Array<string>;
    _dcr: string;
    _packageType: string;
    _condition: string;
    
    constructor() {}
    
    ...

}

而在我的html我使用迭代如下：

<mat-accordion>
    <mat-expansion-panel *ngFor="let file of files | keyvalue">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{file.key}}
        </mat-panel-title>
      </mat-expansion-panel-header>
      <p>{{file.value}}</p>
    </mat-expansion-panel>
  </mat-accordion>

这就是错误发生的地方。如果我在浏览器中运行此代码段，则会files.value产生[object Object]，而不表示它是BarcodeInfoModel类型。此外，在 中html，我无法通过执行类似的操作来获取 BarcodeInfoModel 的属性{{file.value._codeType}}。

Answer 1

映射中声明的对象类型与传递给映射的对象类型不对应。

例如 ：

map = new Map<number, string>([[2, 'Burger'], [1, 'Tomato']]);

你不会有错误

如果你这样写：

map = new Map([[2, 'Burger'], [1, 'Tomato']]);

你会得到数字、字符串不可分配的错误

类型脚本。

祝你好运