HTML-таблицу правильно использовать и установить mat-select в столбцах таблицы - PullRequest
Новая
       17

HTML-таблицу правильно использовать и установить mat-select в столбцах таблицы

0 голосов
/ 03 июля 2019

У меня есть эта таблица: 

<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. Это вывод, если я выберу опцию «Esito Analisi» для первого ряда:

enter image description here

Как я могу разрешить это поведение? И после того, как я могу получить значение выбранной опции для каждой строки, если я хочу сохранить данные?

1 Ответ

0 голосов
/ 03 июля 2019

Хорошо, решение было очень глупым, но я надеюсь, что оно кому-нибудь поможет. Я установил [(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 (documentmento)»: 

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

где documentmenti - это массив: 

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