Привязать элемент массива к [(value)] в Angular

Question

Привет, я работаю с материалом Angular, и у меня есть Массив продуктов, который создает таблицу в моем шаблоне

 <tbody>
    <tr *ngFor="let item of productArray | async; let i = index">

Внутри этого цикла у меня есть еще один цикл на теге <th>:

<th>
   <mat-form-field>
      <mat-select placeholder="Length" formControlName="lengthOption" [compareWith]="compareWith" [(value)]="item.lengthOption">
         <mat-option *ngFor="let lengthOption of item.lengthOptions" [value]="lengthOption">
              {{lengthOption.name}}
         </mat-option>
      </mat-select>
   </mat-form-field>

Я хотел бы использовать двустороннюю привязку [(value)].

Я знаю, что я могу установить [value] для lengthOption.name, например, а затем установить привязку на [(Value)]="selected", а затем я могу установить это в моем компоненте (selected = whatever) или просмотреть его в шаблоне через {{selected}}.

Мой запрос может я получить это значение из родительского массива, как я пытаюсь во внутреннем цикле:

*ngFor="let item of productArray | async; let i = index"

[(value)]="item.lengthOption"

lengthOption существует на productArray.

Суть в том, что я хочу установить начальное выбранное значение для каждого выбора товара.

lengthOption выглядит как { "id": 1, "name": "Ten Years" }

Итак, я пытаюсь установить для объекта параметр mat из родительского массива, а не просто значение объекта из своего собственного массива.

Заранее спасибо.

Answer 1

Двухстороннее связывание не предлагается с динамическим именем и не работает ожидаемым образом. Считайте это [(значение)] как [(ngModel)]

Вы можете использовать (onChange) или, если вы хотите, получить всю информацию о статусе / информации о форме, и если в вашем массиве товаров есть больше элементов, попробуйте использовать formArray, это облегчит вашу жизнь. https://angular.io/api/forms/FormArray

Answer 2

Вы можете добавить новое свойство к элементу (выбранному) и изменить его на ngModelChange

 <mat-select placeholder="Length" formControlName="lengthOption" (ngModelChange)="select($event, item)" [compareWith]="compareWith" [(value)]="item.lengthOption">
     <mat-option *ngFor="let lengthOption of item.lengthOptions" [value]="lengthOption">
        ...

и попробуйте что-нибудь подобное изменить каждый раз, когда вы выбираете новый:

select(selectedValue, item) {
 item['selectedLengthOption'] = selectedValue;
}

и вы можете получить к нему доступ в своем шаблоне внутри цикла

{{item.selectedLengthOption}}