gpt4 book ai didi

angular - 如何从远程 API 服务填充 Material 选择下拉列表?

转载 作者:行者123 更新时间:2023-12-03 21:19:44 25 4
gpt4 key购买 nike

我正在尝试使用来自远程 API 服务的值填充 Material 选择下拉列表。我一直在组件上得到一个空值或未定义的值。

这是使用 MEAN 堆栈和 Angular Material 的 Angular 7。我试过 compareWith 函数并记录值。我注意到该组件总是首先加载其值为空的值,然后是具有值的 API 服务。

<mat-form-field>
<mat-select formControlName="company" placeholder="Select
Company" [(value)]="selectedCompany" [compareWith]="compareFn">
<mat-option *ngFor="let lC of loadedCompanies"
[value]="lC.id">
{{lC.name}}
</mat-option>
</mat-select>
</mat-form-field>

ngOnInit() {
this.authStatusSub = this.authService
.getAuthStatusListener()
.subscribe(authStatus => {
this.isLoading = false;
});

this.form = new FormGroup({
id: new FormControl(null),
company: new FormControl(this.loadedCompanies)
});

this.companyService.getCompanyList();
this.companySub = this.companyService
.getcompanyUpdateListener()
.subscribe((companyData: {companies: Company[]}) => {
this.isLoading = false;
this.loadedCompanies = companyData.companies;
});
}

compareFn(c1: Company, c2: Company): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

我希望这些值在加载组件之前从 observable 加载并填充 select 输入。

最佳答案

您可以添加 *ngIf到父容器,这样 mat-select 组件将不会被加载,直到 observable 被订阅并且 loadedCompanies已分配。

 <mat-form-field *ngIf = "loadedCompanies">
<mat-select formControlName="company" placeholder="Select
Company" [(value)]="selectedCompany" [compareWith]="compareFn">
<mat-option *ngFor="let lC of loadedCompanies"
[value]="lC.id">
{{lC.name}}
</mat-option>
</mat-select>
</mat-form-field>

FormControl 公司的初始值应设置为 null,而不是整个 loadedCompanies大批。
this.form = new FormGroup({
id: new FormControl(null),
company: new FormControl(null)
});

这就是您应该如何填充您的 loadedCompanies大批。
loadedCompanies: Company[];

ngOnInit() {
.
.
// other lines of code before this
this.companyService.getCompanyList().subscribe(companyData => {
this.loadedCompanies = companyData.companies;
});
}

关于angular - 如何从远程 API 服务填充 Material 选择下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55509028/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com