Привязка данных в динамически генерируемых строках с выпадающим - PullRequest
Новая
       30

Привязка данных в динамически генерируемых строках с выпадающим

0 голосов
/ 07 сентября 2018

У меня есть таблица, которая динамически генерирует строки с подробной информацией о загруженных файлах. В строках есть выпадающий список для выбора типа файла.

В настоящее время у меня проблемы с динамически создаваемым раскрывающимся списком. Он устанавливает одинаковое значение для всех раскрывающихся списков во всех строках, если я выбираю значение в любом раскрывающемся списке.

HTML: 

<table>
 <thead>
  <tr>
   <th>File Name</th>
   <th>File Type</th>
  </tr>
 </thead>

 <tbody>
  <tr *ngFor="let item of uploader.queue">
   <td>
    {{ item?.file?.name }}
   </td>

   <td>
    <mat-form-field>
      <mat-select  placeholder="Select File Type" [(ngModel)]="selectedType">
        <mat-option *ngFor="let type of Types" [value]="type.type">
          {{type.type}}
        </mat-option>
       </mat-select>
     </mat-form-field>
   </td>
   <td>
    <button (click)="AddPdf(item)">Upload</button>
   </td>
  </tr>
 </tbody>
<table>

TS: 

public AddPdf(Filenames: FileItem) {
  this.data = { filename: FileNames.file.name.toString() , LetterName:this.selectedLetterName, LetterType: this.selectedType };
  console.log(this.data.filename, 'File Name');
  console.log(this.data.LetterName, 'Letter Name');
  console.log(this.data.LetterType, 'Letter Type');
}

Теперь, если я добавлю три файла, будут сгенерированы три строки. И если я выберу тип файла для одной строки, то же самое будет отражено для всех строк.

Пожалуйста, помогите мне понять недостаток здесь!

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 10 сентября 2018

Я понял проблему. Вместо [(ngModel)] я разделил его на две части, как показано ниже: 

        <mat-form-field>
          <mat-select
            placeholder="Select Letter Name"
            #lettername
            [ngModel]="selectedLetterName"
            (ngModelChange)="onLetterNameSelect($event)"
            [ngModelOptions]="{standalone: true}">
            <mat-option *ngFor="let LetterName of LetterNames" [value]="LetterName.ReportName">
              {{LetterName.ReportName}}
            </mat-option>
          </mat-select>
        </mat-form-field>

После изменений все заработало, как я и ожидал.

...