如何在mat-select中迭代ng-repeat

Question

实际上，我有非常简单的代码，但我不明白为什么它会像这样我无法使用Angular访问HTML页面中的变量

这是我的代码，请看这里

类型脚本代码

import { Component, Injector, OnInit, Inject, Optional } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { finalize } from 'rxjs/operators';
import { AppComponentBase } from '@shared/app-component-base';

 from '@shared/service-proxies/service-proxies';

@Component({
    templateUrl: 'create-queries-dialog.component.html',
    styles: [
        `
      mat-form-field {
        width: 100%;
      }
    `
    ]
})
export class CreateQueryDialogComponent extends AppComponentBase
    implements OnInit {
    saving = false;
    DataArr = [{Id:1,Name:"John"},{Id:2,Name:"Katter"}];
}

这是我的html代码

<mat-dialog-content>
{{DataArr}}
    <mat-form-field>

            <mat-label>Select broker</mat-label>
            <mat-select [(ngModel)]="query.BrokerId" required>
                <mat-option ng-repeat="item in DataArr" ng-value="item.Id">
                    {{item.Name}}
                </mat-option>
            </mat-select>
    </mat-form-field>
</mat-dialog-content>

我还在控制台中附加了我的错误屏幕

Answer 1

我认为您使用的是Angular 2+，请在html中将代码更新为以下代码

Answer 2

ng-repeat不再包含在Angular中。而是像建议的那样在标签上使用指令* ngFor。