角度/材质 ui - 以编程方式 select mat-selection-list

Question

我有一个垫子选择列表，我需要在组件加载时以编程方式检查特定项目。 我需要检查的项目将根据 mat-list-option 的 [value] 进行选择。 我找不到任何关于此的文档。 html 非常简单：

<mat-selection-list color="primary" #suretyList formControlName="AgentAgencyAndSureties">
    <mat-list-option *ngFor="let surety of suretyNames" [value]="surety.Id">
        {{surety.SuretyName}}
    </mat-list-option>
</mat-selection-list>

我只想检查值中具有特定surety.Id 的项目。 看起来这应该不太难做，但就像我说的那样，我找不到任何例子或好的文档。

我将 Angular 10 用于核心和材料 UI

Answer 1

尝试mat-list-option selected的输入。

<mat-list-option  [selected]="condition">....

Answer 2

tmsbrndz 为我指明了正确的方向。 我创建了以下 function：

  isChecked(id): boolean {
        const exists = this.agentModel.AgentAgencyAndSureties.some(x => x.AgencyAndSuretyId == id);
        return exists;
  }

然后使用 function 添加选定的属性：

<mat-selection-list color="primary" #suretyList formControlName="AgentAgencyAndSureties">
    <mat-list-option *ngFor="let surety of suretyNames" [value]="surety.Id" [selected]="isChecked(surety.Id)">
    {{surety.Id + " " + surety.SuretyName}}
    </mat-list-option>
</mat-selection-list>

Answer 3

您应该使用[selected]属性，因为该组件中没有关于表单控件支持的信息（ https://material.angular.io/components/list/api#MatSelectionList ）