Angular 从动态生成的垫子中获取值 select

Question

我正在使用 Angular material 制作如下所示的反应式表单：

Form

使用这段代码，我制作了一个动态生成的垫子 select 和一个输入，但我不知道如何从所有这些中获取值。

HTML:

<div *ngFor="let number of [].constructor(cantConsumibles)">
    <mat-select placeholder="Selecciona un consumible" class="form-control" 
                formControlName="consumibles">
        <mat-option *ngFor="let consumible of consumibles" [value]="consumible">
            {{consumible.CodConsumible}}
        </mat-option>
    </mat-select>
    <input matInput type="number" formControlName="consumibles" placeholder="Cantidad">
</div>

<div align="end">
    <button mat-button (click)="agregarConsumible(true)"><mat-icon>add</mat-icon></button>
    <button mat-button (click)="agregarConsumible(false)"><mat-icon>remove</mat-icon></button>
</div>

TS:

cantConsumibles: number = 0;

   agregarConsumible(flag: boolean): void {
   (flag) ? this.cantConsumibles++ : this.cantConsumibles--;
 }

有什么想法吗？提前致谢

Answer 1

select API 文档说我们可以用 @Output() selectionChange: EventEmitter<C> https://material.angular.io/components/select/api

注册一个更改

所以让我们在 select 上添加该方法以了解 selected 的内容。

<mat-select placeholder="Favorite food" (selectionChange)="onFoodSelection($event)">
    <mat-option *ngFor="let food of foods" [value]="food.value">
       {{ food.viewValue }}
    </mat-option>
  </mat-select>

然后我们 console.log 事件值，但也将事件值保存到变量以备后用。

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  output: any;

  foods = [
    {value: 'product10', viewValue: 'Steak'},
    {value: 'product20', viewValue: 'Pizza'},
    {value: 'product30', viewValue: 'Tacos'},
    {value: 'product40', viewValue: 'Lasagne'},
  ];


  onFoodSelection(event:any) {
    this.output = event.value;
    console.log(event.value)
  }
}

在其他元素（[=27=]、输入、复选框等）上遵循相同的原则，获取模板更改事件并在 typescript 代码部分中执行一些操作。

下面是一个小例子：https://stackblitz.com/edit/material-select-change-event-binding-tta13p?file=app%2Fapp.component.ts

Angular 从动态生成的垫子中获取值 select

Angular get value from dynamically generated mat select

html

typescript

angular-material

angular