Угловая привязка входного значения [значение] к [(ngModel)] - PullRequest
Новая
       18

Угловая привязка входного значения [значение] к [(ngModel)]

1 голос
/ 05 июля 2019

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

<table class="mat-elevation-z8">
          <tr *ngFor="let prescription of prescriptions" class="mat-row">
            <td>
              <mat-form-field class="">
                <input  [value]="prescription.description" matInput placeholder="Description">
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="">
                  <mat-select>
            <mat-option *ngFor="let object of selectedObjects" [value]="object.id" [(ngModel)]="prescription.idObject">
              {{object.description}}
            </mat-option>
          </mat-select>
        </mat-form-field>   
            </td>
            <td>
              <button mat-button class="delete" (click)="check(prescription)">delete</button>
            </td>
          </tr>
        </table>

, где мои предписания массива имеют такую ​​структуру: 

 prescriptions = [
    {
      id: 1,
      description: "Prescrizione 1",
      date1: new Date(),
      date2: new Date(),
      idObject: 0
    },
    {
      id: 2,
      description: "Prescrizione 2",
      date1: new Date(),
      date2: new Date(),
      idObject: 0
    }
  ]

Каждая строка таблицы представляет объект этого массива.В каждой строке есть элемент mat-select, который берет свои опции из этого массива selectedObjects: 

"selectedObjects": [
        {
            "id":1, "description": "Desc1"
          },
          {
            "id":2, "description": "Desc2"
          },
          {
            "id":3, "descrizione": "Desc3"
          }

Я хочу добиться привязки значения выбранной опции, то есть object.id, ксвойство idObject элемента строки.Поэтому я использовал [value]="object.id" [(ngModel)]="prescription.idObject", но он не работает, так как свойство остается 0 для всех строк.Я проверил это, напечатав свойство в методе check (то есть для каждой строки).
Есть ли способ реализовать этот тип привязки?

1 Ответ

1 голос
/ 05 июля 2019

Вы должны поместить ngModel в опцию, а не в опцию.Это ваш выбор, который «изменяется» и устанавливается каждый раз, когда вы выбираете опцию, а не саму опцию.Посмотрите на этот пример: https://stackblitz.com/angular/vkkalkxbmrok?file=app%2Fselect-form-example.ts

РЕДАКТИРОВАТЬ: хорошо, я получил то, что вы пытаетесь сделать здесь.Вы хотите установить idObject внутри каждого рецепта.При связывании ngModel на выбранном объекте будет скопирован весь выбранный объект из selectedObjects, а не только ID: 

{"id":2, "description": "Desc2"}

Я не уверен, что вы можете указать, я просто хочу подобъект этого выбора, но этоЭто идеальный случай, когда вы можете использовать: 

(selectionChange)="setPrescriptionId($event, prescription)"

Угловой 6 Метод изменения выбора матов материала удален

Это будет вызываться при каждом изменении вашего выбора. 

public setPrescriptionId(event: {id:string, description: string}, prescription: IYourPrescriptionInterface) {
    prescription.idObject = event.id;
}
...