以编程方式设置 mat-select 默认选项答案

【问题标题】：Programmatically set mat-select default option以编程方式设置 mat-select 默认选项
【发布时间】：2020-11-03 22:04:43
【问题描述】：

我有一个组件，它在我的 Angular 材质项目中基于名为 lstSinisDiaria 的数组重复一组元素。

<div *ngFor="let linha of lstSinisDiaria" class="sinisDiaria">

<div class="sinistro">

    <p>

        {{linha.cd_letra_sinistro}}-{{linha.cd_local_contabil}}-{{linha.cd_ramo}}-{{linha.cd_sinistro}}

    </p>


</div>

<div class="tipoErro">

    <mat-form-field>

        <mat-select [(value)]={{linha.ds_tipo_erro}}>

            <mat-option *ngFor="let tipoErro of lstTipoErro" [value]="tipoErro.value">
                {{tipoErro.value}}
            </mat-option>

        </mat-select>

    </mat-form-field>       

</div>

如您所见，一个特别的元素是 mat-select，它也是从组件内部的另一个静态列表 (lstTipoErro) 构建的：

import { Component, OnInit } from '@angular/core';

import { ListaSinistroDiariaService } from './lista-sinistro-diaria-service.service';

@Component({
  selector: 'app-lista-sinistro-diaria',
  templateUrl: './app-lista-sinistro-diaria.component.html',
  styleUrls: ['./app-lista-sinistro-diaria.component.css']
})
export class AppListaSinistroDiariaComponent implements OnInit {
  
  lstSinisDiaria : any[];

  lstTipoErro : any[] = [
    {value: 'ACSELX'},
    {value: 'BASE'},
    {value: 'CIR'},
    {value: 'CONTABIL'},
    {value: 'NÃO INFORMADO'},
    {value: 'ONLINE'},
    {value: 'REGRA'}
  ];

  lstSituacao : any[] = [
    {value: 'AGUARDANDO CIR'},
    {value: 'AGUARDANDO USUÁRIO'},
    {value: 'AGUARDANDO PAGTO'},
    {value: 'CONTABILIZADO'},
    {value: 'VERIFICANDO'},
    {value: 'AGUARDANDO ACSELX'}
  ];

  lstAnalista : any[] = [
    {value: 'FISCH'},
    {value: 'LEO'},
    {value: 'R. ABAMBRES'},
    {value: 'MARCIO'}
  ];
  
  constructor(private service : ListaSinistroDiariaService) {
    
    this.lstSinisDiaria = this.service.getLista();
  }

  ngOnInit(){

  }

}

即使我能够使用所述列表填充 mat-options，但我仍然无法设置 mat-select 元素的默认值，以匹配数组返回的值。

我要做的是将每个重复 mat-select 的默认选择选项设置为与 linha.ds_tipo_erro 返回的值相同，这是原始数组中的一个值。

有没有办法做这样的事情<mat-select [(value)]={{linha.ds_tipo_erro}}>？

PS.：这是我第一次在这里问问题，如果需要更多信息或者我忘记写或格式化某些内容，请告诉我。

【问题讨论】：

我添加了 [angular-material] 标签，以吸引该库中的专家。我还删除了数组前面的 JSON 一词，因为您正在处理 JavaScript 数组；不涉及 JSON（JSON 是一种文本格式）。在 Stack Overflow 上，其他人通常会编辑您的帖子以使其成为最好的。

标签： angular typescript angular-material

【解决方案1】：

如果您希望将值连接到值linha.ds_tipo_erro。正确的绑定语法是这样的：

<mat-select [(value)]="linha.ds_tipo_erro">
   <mat-option *ngFor="let tipoErro of lstTipoErro" [value]="tipoErro.value">
      {{tipoErro.value}}
   </mat-option>
</mat-select>

这意味着当您更改选择时，该值也将更新回对象，因为[(value)] 是双向绑定的语法。如果您只想在第一次设置该值，请使用[value]="linha.ds_tipo_erro"。

查看official Angular documentation on binding 了解更多详细信息，这并不特定于材料控制。

【讨论】：

我刚刚试了一下，效果很好。非常感谢！