Question

我有这张桌子：

<table class="mat-elevation-z8">
              <tr>
                  <th align="left" mat-header="nomeFile"> Nome file </th>
                  <th align="left" mat-header="note"> Note </th>
                  <th align="left" mat-header="tipoDocumento"> Tipo documento </th>
                  <th></th>
                </tr>
            <tr *ngFor="let documento of documenti" class="mat-row">
                <td> {{documento.nome}} </td>
                <td> {{documento.note}} </td>
                <td> <mat-form-field class="col">
                    <mat-select formControlName="tipoDocumento" [(value)]="tipoDocumentoSelezionato">
                      <mat-option value="generico">Allegato Generico</mat-option>
                      <mat-option value="verbale">Verbale</mat-option>
                      <mat-option value="esito">Esito Analisi</mat-option>
                    </mat-select>
                  </mat-form-field> </td>
            </tr>
        </table>

此实现的问题是，每当我在表的一行中选择一个选项时，表中的所有其他行都将为它们的mat-select设置相同的值。如果我为第一行选择“ Esito Analisi”选项，则为输出：

我该如何解决此行为？然后，如果要保存数据，如何获取每一行的seleted选项的值？

Answer 1

好的，解决方案非常愚蠢，但我希望它能对某人有所帮助。我设置[(value)]="documento.tipo"而不是将其绑定到“通用”变量。所以最后我有了：

<tr *ngFor="let documento of documenti" class="mat-row">
                <td> {{documento.nome}} </td>
                <td> {{documento.note}} </td>
                <td> <mat-form-field class="col">
                    <mat-select [(value)]="documento.tipo">
                      <mat-option value="generico">Allegato Generico</mat-option>
                      <mat-option value="verbale">Verbale</mat-option>
                      <mat-option value="esito">Esito Analisi</mat-option>
                    </mat-select>
                  </mat-form-field> </td>
                <td>
                    <button mat-button class="delete" (click)="rimuoviDaDocumenti(documento)">delete</button>
                </td>
            </tr>

并在方法“ rimuoviDaDocumenti（documento）”中获取所选选项：

  rimuoviDaDocumenti(documento){
    console.log("Documento " + documento.tipo);
  }

其中documenti是此数组：

documenti = [
    {
    nome: "Doc 1",
    note: "notes",
    tipo: ""
  },
  {
    nome: "Doc 2",
    note: "notes",
    tipo: ""
  }

HTML表格正确使用并在表格的列中设置了mat-select

1 个答案: