Angular/material ui - 以编程方式选择 mat-selection-list答案

【问题标题】：Angular/material ui - programatically select mat-selection-listAngular/material ui - 以编程方式选择 mat-selection-list
【发布时间】：2021-03-18 19:05:56
【问题描述】：

我有一个垫选择列表，我需要在组件加载时以编程方式检查特定项目。我需要检查的项目将根据 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

【问题讨论】：

标签： angular angular-material

【解决方案1】：

尝试mat-list-optionselected 输入。

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

【讨论】：

谢谢。我的意思是我需要从与选择列表无关的现有数组中选择选项。我需要遍历选择列表并根据选项的 [value] 选择选项。希望这是有道理的

【解决方案2】：

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

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

然后使用函数添加选择的属性：

<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>

【讨论】：

【解决方案3】：

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

【讨论】：