在angular中使用嵌套的ngfor循环中的ngmodel，并在ngModel中获取动态值

// typescript 文件
export interface Product {
  id: number;
  name: string;
  attributes: Attribute[];
}

export interface Attribute {
  attributeId: number;
  name: string;
  options: Option[];
}

export interface Option {
  optionId: number;
  value: string;
}

<!-- HTML 模板 -->
<form #form="ngForm">
  <div *ngFor="let product of products">
    <h3>{{ product.name }}</h3>
    <div *ngFor="let attribute of product.attributes">
      <h4>{{ attribute.name }}</h4>
      <select [(ngModel)]="attribute.selectedOption" name="{{ attribute.attributeId }}">
        <option *ngFor="let option of attribute.options" [value]="option.optionId">
          {{ option.value }}
        </option>
      </select>
    </div>
  </div>
</form>

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...
    FormsModule
  ],
  // ...
})
export class AppModule { }