Question

我正在使用Angular6。我有一个import re import requests from flask import Flask, render_template app = Flask(__name__) @app.route('/') def main(): # encoded url with information needed to request an authorization url = "https://kauth.kakao.com/oauth/authorize?client_id=MY_CLIENT_ID&redirect_uri=http%3A%2F%2F127.0.0.1%3A5000%2F%2FloginAuthorized/&response_type=code" return render_template('index.html', request_url=url) # If you authorize the service, it redirected to this url # Catch any url that has /loginAuthorized as its base @app.route("/loginAuthorized", defaults={"path": ""}) @app.route("/<path:path>") def loginAuthorized(path): print('a') print(path) # "loginAuthorized/" is printed, there is no code print('b') if __name__ == "__main__": app.run()和一个formGroup。 formArray的字段可以动态添加。我需要为formArray的表单字段添加“物料自动完成”。没发生我遵循了How to use mat-autocomplete (Angular Material Autocomplete) inside FormArray (Reactive Forms)。但是，它不起作用。当formArray中的值更改时，不会触发该函数。

formField

内部html

export interface IBrand {
    BrandId: string;
    BrandName: string;
}
//.......................
brandDatas: Observable<IBrand[]>[] = [];
bran: IBrand[] = [
    { "BrandId": "1234", "BrandName": "Apple" },
    { "BrandId": "12344", "BrandName": "Samsung" },
    { "BrandId": "12345", "BrandName": "Oppo" },
    { "BrandId": "12347", "BrandName": "Sony" },
    { "BrandId": "12349", "BrandName": "Panasonic" },

]

this.formGroup = this.fb.group({

    PurchaseDate: new FormControl('', [Validators.required]),
    BillNo: new FormControl('', [Validators.required]),
    TotalCash: new FormControl(''),
    Total: new FormControl(''),
    ProductInformation: this.fb.array([
});

ngOnInit() {
    const productInformation = this.fb.group({
        ProductCategoryId: [''],
        BrandId: [''],
        ProductId: [''],
    })
    this.multipleform.push(productInformation);
    this.totalValue = 0;
    this.ManageNameControl(0);
}

ManageNameControl(index: number) {
    var arrayControl = this.formGroup.get('ProductInformation') as FormArray;
    let item = arrayControl.at(index);

    this.brandDatas[index] = item.get('BrandId').valueChanges
        .pipe(
            startWith(''),
            map(value => this._filterBrand(value))
        );
}

_filterBrand(name: string): IBrand[] {
    return this.bran.filter(opt =>
        opt.BrandName.toLowerCase().includes(name.toLowerCase()));
}

displayBrand(brand?: IBrand): string | undefined {
    return brand ? brand.BrandName : undefined;
}

在调试时，首先<div formArrayName="ProductInformation"> <div *ngFor="let productInformation of multipleform.controls; let i=index" [formGroupName]="i"> ... <mat-form-field fxFlex="12%"> <input [formControl]="BrandCtrl" matInput placeholder="Brand" [matAutocomplete]="auto" formControlName="BrandId" minlength="3" /> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayBrand"> <mat-option *ngFor="let brand of brandDatas[i] | async" [value]="brand"> <span>{{brand.BrandName}}</span> </mat-option> </mat-autocomplete> </mat-form-field> ... </div> </div>函数被调用，并且当表单字段被动态添加并且valueChanges仅在那时触发。此后，valueChanges不会在更改Brand字段上的文本时触发。如何解决这个问题？这种materail自动完成功能如何实现。

Answer 1

模板引用在您的文档中必须是唯一的。在您的情况下，MatAutocomplete可重复使用，因为它具有相同的功能。如果将MatAutocomplete放在ngFor循环之外，它应该可以工作。

<div formArrayName="ProductInformation">
    <div *ngFor="let productInformation of multipleform.controls; let i=index" [formGroupName]="i">
       ...
        <mat-form-field fxFlex="12%">
          <input [formControl]="BrandCtrl" matInput placeholder="Brand"
                     [matAutocomplete]="auto" formControlName="BrandId" minlength="3" /
          </mat-form-field>
       ...
    </div>
</div>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayBrand">
   <mat-option *ngFor="let brand of brandDatas[i] | async" [value]="brand">
       <span>{{brand.BrandName}}</span>
    </mat-option>
</mat-autocomplete>

如何在formgroup内为formarray的form字段实现Material Autocomplete

1 个答案: