Html 在<；中设置默认值；mat select>；基于列表的布尔条件

我使用mat select下拉列表，从服务器获取的数据是一个对象列表。下拉列表用于每个对象中的列表。示例数据如下所示

[
{
    "id": 16902488,
    "email": "",
    "email_domain": "",
    "first_name": null,
    "last_name": null,
    "address_line_1": null,
    "address_city": null,
    "address_state": null,
    "address_postal": null,
    "clicked_at": "2021-05-22T03:53:36.000Z",
    "landing_page_url": "",
    "landing_page_domain": "",
    "created_at": "2021-05-22T04:08:52.000Z",
    "updated_at": "2021-05-22T04:08:52.000Z",
    "page_title": "",
    "referrer": null,
    "status": null,
    "templateNames": [
      {
        "id": 1011,
        "productId": 1012,
        "accountId": 3,
        "templateName": "fgdgf",
        "description": "dgfdg",
        "emailSubject": "sgrg",
        "templateHTML": "grfggr",
        "productName": "wef",
        "from": "tegwttg",
        "isDefault": true
      },
      {
        "id": 1013,
        "productId": 1012,
        "accountId": 1006,
        "templateName": "fgdgf",
        "description": "dgfdg",
        "emailSubject": "sgrg",
        "templateHTML": "",
        "productName": "wef",
        "from": "tegwttg",
        "isDefault": false
      },
      {
        "id": 1015,
        "productId": 1012,
        "accountId": 3,
        "templateName": "fgdgf",
        "description": "dgfdg",
        "emailSubject": "sgrg",
        "templateHTML": "",
        "productName": "wef",
        "from": "tegwttg",
        "isDefault": false
      }
    ]
  }
]

我已经为模板名创建了下拉列表，我能够在下拉列表中获得值。但是我想根据每个模板名中的isDefault值是true还是false来设置下拉列表的默认值

<ng-container matColumnDef="TEMPLATE">
            <th mat-header-cell *matHeaderCellDef> TEMPLATE
            </th>
            <td mat-cell *matCellDef="let element">
              <mat-select [value]='???????' (selectionChange)="addTemplateToLead($event)">
                <mat-option *ngFor="let template of element.templateNames" [value]="template">
                  {{template.templateName}}
                </mat-option>
              </mat-select>
            </td>
          </ng-container>

模板
{{template.templateName}

我想您需要初始化mat select。 有很多方法可以做到这一点，其中一种方法是使用formControl，如下例所示

html:

---

我想你要初始化mat select。 有很多方法可以做到这一点，其中一种方法是使用formControl，如下例所示

html:

提供了具有初始值的选择示例。

值

属性应具有双向绑定：

{{template.templateName}

组件的

selections

属性应使用要设置的选项进行初始化。以下是该组件的简化版本：

导出类AppComponent{
模板=[
{
id:1011，
templateName:'fgdgf1'，
isDefault:正确
},
{
id:1013，
templateName:'fgdgf2'，
isDefault:错误
},
{
id:1015，
templateName:'fgdgf3'，
isDefault:正确
}
];
选择：数组；
构造函数（）{
this.selections=this.templates.filter（（t:any）=>！！t.isDefault）；
}
}

selections

属性包含当前选定的值。它使用具有

isDefault

=

true

的模板数组初始化。在实际组件中，应在加载

模板的父对象后立即初始化此值。
提供了一个带有初始值的选择示例。
值
属性应具有双向绑定：


{{template.templateName}

组件的
selections
属性应使用要设置的选项进行初始化。以下是该组件的简化版本：

导出类AppComponent{
模板=[
{
id:1011，
templateName:'fgdgf1'，
isDefault:正确
},
{
id:1013，
templateName:'fgdgf2'，
isDefault:错误
},
{
id:1015，
templateName:'fgdgf3'，
isDefault:正确
}
];
选择：数组；
构造函数（）{
this.selections=this.templates.filter（（t:any）=>！！t.isDefault）；
}
}

selections
属性包含当前选定的值。它使用具有
isDefault
=
true
的模板数组初始化。在实际组件中，应在加载
模板的父对象后立即初始化此值。
感谢您的努力，但您初始化的“数据”应为数组。在这种情况下，这将不起作用。我编辑了答案，我希望答案是正确的没有运气。它不起作用。感谢您的努力，但是您初始化的“数据”应该是一个数组。在这种情况下，这将不起作用。我编辑了答案，我希望答案是正确的没有运气。它不起作用了。
<mat-form-field>
  <mat-label>TEMPLATE</mat-label>
  <mat-select [formControl]="selected">
    <ng-container *ngFor="let item of data">
      <mat-option *ngFor="let template of item.templateNames" [value]="template">
        {{template.templateName}}
      </mat-option>
    </ng-container>
  </mat-select>
</mat-form-field>

export class AppComponent implements OnInit {
  title = 'selectbox';
  constructor() { }
  ngOnInit() {
    const indexData=this.data.findIndex(d=>d.id==16902488); // 16902488 dynamic
    const indexTemplateNames = this.data[indexData].templateNames.findIndex(d=>d.isDefault==true);
    this.selected.setValue(this.data[indexData].templateNames[indexTemplateNames]);

  }
  selected = new FormControl(null);

  data =[
    {
      "id": 16902488,
      "email": "",
      "email_domain": "",
      "first_name": null,
      "last_name": null,
      "address_line_1": null,
      "address_city": null,
      "address_state": null,
      "address_postal": null,
      "clicked_at": "2021-05-22T03:53:36.000Z",
      "landing_page_url": "",
      "landing_page_domain": "",
      "created_at": "2021-05-22T04:08:52.000Z",
      "updated_at": "2021-05-22T04:08:52.000Z",
      "page_title": "",
      "referrer": null,
      "status": null,
      "templateNames": [
        {
          "id": 1011,
          "productId": 1012,
          "accountId": 3,
          "templateName": "fgdgf",
          "description": "dgfdg",
          "emailSubject": "sgrg",
          "templateHTML": "grfggr",
          "productName": "wef",
          "from": "tegwttg",
          "isDefault": true
        },
        {
          "id": 1013,
          "productId": 1012,
          "accountId": 1006,
          "templateName": "fgdgf",
          "description": "dgfdg",
          "emailSubject": "sgrg",
          "templateHTML": "",
          "productName": "wef",
          "from": "tegwttg",
          "isDefault": false
        },
        {
          "id": 1015,
          "productId": 1012,
          "accountId": 3,
          "templateName": "fgdgf",
          "description": "dgfdg",
          "emailSubject": "sgrg",
          "templateHTML": "",
          "productName": "wef",
          "from": "tegwttg",
          "isDefault": false
        }
      ]
    }
  ]
}