Question

我有一个组件，该组件在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：这是我第一次在这里问问题，请告知我是否需要更多信息，或者是否忘记编写或格式化某些内容。

Answer 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以获得更多详细信息，这不是特定于材质控件的。

以编程方式设置垫选择默认选项

1 个答案: