Javascript 以角度更新表格

我正在尝试在创建事件后执行操作。 创建一个已在form1中选择的控件表单，并更新一个PSselected表。 我有两个文件，A.html和A.ts

A.html：

<mat-select placeholder="form1" [formControl]="product" (ngModelChange)="getP($event)" multiple> <mat-option *ngFor="let p of allProduct" [value]="p.pro_nom">{{p.pro_nom}}</mat-option>
</mat-select>

<mat-form-field *ngFor="let valeurControls of valeursControls">
   <input matInput maxLength="255" type="text [placeholder]="valeurControls.valeur.n [formControl]="valeurControls.formControl">
</mat-form-field>                                                         

答：

---

在函数getP中，我的表正在更新，但是当我在buildForm中使用它时，它是空的，但是它应该具有与调用this.buildForm相同的值；从组件构造函数。 pSelected的值将是声明的值：public pSelected:Array

在mat select组件内选择/取消选择值时，应重新生成控件

尝试：

---

首先使用更具描述性的变量名，而不是“b”和“p”。像这样阅读你的代码真的很难。我真的很抱歉，你可以在这里编辑你的代码，然后使用更具描述性的东西。我认为你也可以在subscribeThank you中使用observable as pSelected和buildForm，但它不太好用。当我单击它时，会添加表单控件，但如果我再次单击，它不会删除它。所以我只剩下duplicates@NickLersberghe我不知道如何在这种情况下使用observable。你可以从你的PSF中创建一个observable。在构造函数中，您可以订阅它。每当pSelected发生更改时，该订阅将运行该代码。这样，每次pSelected更改时，都将调用buildForm。尝试类似“pSelected:Observable”的方法，并在构造函数中使用“this.pSelected.subscriberr=>this.buildFormarr”。您可以将该方法更改为使用该参数，而不是使用this.pSelected。一定要测试它，我不完全确定它是否能按预期工作。

import { ChangeDetectorRef, Component, OnInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { filter, takeUntil } from 'rxjs/operators';
import { Product, Candy } from 'src/app/models';
import { Service } from 'src/app/services';
import { Listener } from 'selenium-webdriver';

@Component({
    selector: 'ei',
    templateUrl: './A.component.html',
    styleUrls: ['./A.component.less'],
    encapsulation: ViewEncapsulation.None
})
export class AComponent extends FormFieldsContainer implements OnInit {

    @Output('change') inputChange = new EventEmitter();

    //var

    allProduct: Product[];
    Candy: Candy;

    // Form
    actionFormGroup: FormGroup;
    product: FormControl;
    event: Listener[]

    // P
    valeursControls: { valeur: candy, formControl: FormControl }[] = [];

    public pSelected: Array<any>;

    // Constructor
    constructor(private fb: FormBuilder) {
        super();
        this.Candy = this.Candy ? this.Candy : { name: null, type: null };
        this.pSelected = [];
        this.buildForm();
    }

    ngOnInit() {
      this.Service.getProduct()
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(p => {
                this.allProduct = p;
            });
    }
    getP(event?: Event[]) {
        if (typeof event == 'undefined') {
            this.pSelected = [];
        } else {
            this.pSelected = event;
        }
        console.log(this.pSelected)
        return this.pSelected;
    }

    getFormGroup(): FormGroup {
        return this.actionFormGroup;
    }

    onSubmitSuccess<Boolean>(result: Boolean) {

    }

    private buildForm() {
        this.submitted = false;
        this.p= this.fb.control('', Validators.required);
        this.actionFormGroup = this.fb.group({
            product: this.product
        });

        // my array does not update, it remains empty
        this.pSelected .forEach(p => {
            const VarFormControl = this.fb.control(null);
            this.valeursControls.push({
                valeur: { name: p, type: this.Candy.type },
                formControl: VarFormControl 
            });
            this.actionFormGroup.addControl(p, VarFormControl );
        });
    }
    Actions() {
        this.submitted = true;
    }
}

getP(event?: Event[]) {
    this.valeursControls = [];
    if (typeof event == 'undefined') {
        this.pSelected = [];
    } else {
        this.pSelected = event;
        this.buildValeursControls();
    }
}

private buildValeursControls(){
    this.pSelected.forEach(p => {
        const VarFormControl = this.fb.control(null);
        this.valeursControls.push({
            valeur: { n: p, r: this.B.r },
            formControl: VarFormControl 
        });
        this.actionFormGroup.addControl(p, VarFormControl );
    });
}

private buildForm() {
    this.submitted = false;
    this.p= this.fb.control('', Validators.required);
    this.actionFormGroup = this.fb.group({
        p: this.p
    });
}