我试图提取数据并将其绑定到下拉列表中,并且基于对第一个下拉列表的选择,我想填充第二个下拉列表。为此,我写了下面的代码。但是我没有得到正确的输出。相反,我正在得到错误。请检查我的代码,因为我是Angular的新手。以下是我从哪里获取数据的json数据。
这是我的http服务方法:
getAccountByApiGateway(accountType: string) {
return this.http.get(this.serviceUrl + "/account-type/" + accountType);
}
以下是我的JSON数据:
{
"data": [
{
"id": "8a8080fc710cdc140171104216c2002b",
"name": "a",
"org": {
"id": "8a8080c4701e557501701e6cbeed003e",
"orgPlan": "ENTERPRISE"
},
"accountType": "AWS"
},
{
"id": "8a80802c712a8e8301712ad32c540001",
"name": "azure",
"org": {
"id": "8a8080c4701e557501701e6cbeed003e",
"orgPlan": "ENTERPRISE"
},
"accountType": "AZURE"
},
{
"id": "8a80802c712a8e8301712b177d2e0002",
"name": "aws2",
"org": {
"id": "8a8080c4701e557501701e6cbeed003e",
"orgPlan": "ENTERPRISE"
},
"accountType": "AWS"
},
{
"id": "8a80802c712a8e8301712b7c3b5a0003",
"name": "FX AWS",
"org": {
"id": "8a8080c4701e557501701e6cbeed003e",
"orgPlan": "ENTERPRISE"
},
"accountType": "AWS"
}
],
"totalPages": 0,
"totalElements": 0
}
以下是我的组件数据
accountTypes: Type[] = [
{ value: "AWS", viewValue: "AWS" },
{ value: "AZURE", viewValue: "AZURE" }
];
ngOnInit() {
this.getApiGatewayAccounts();
}
changeIssueTracker(type) {
if (type.value === "AWS") {
this.job.issueTracker.accountType = "AWS";
} else if (type.value === "AZURE") {
this.job.issueTracker.accountType = "AZURE";
}
this.getApiGatewayAccounts();
}
getApiGatewayAccounts() {
this.handler.activateLoader();
this.apiGatewayService.getAccountByApiGateway("API_GATEWAY").subscribe(
results => {
this.handler.hideLoader();
if (this.handler.handle(results)) {
return;
}
this.apiAccounts = results['data'];
},
error => {
this.handler.hideLoader();
this.handler.error(error);
}
);
}
我的模板代码如下:
<mat-form-field class="full-width">
<mat-select name="cloudString" placeholder="Select API Gateway">
<mat-option disabled>--- Select API Gateway ---</mat-option>
<mat-option *ngFor="let account of accountTypes" [value]="account.value" (click)="changeIssueTracker(type)">
<span *ngIf="account.value=='AWS'">
<img class="img-responsive h-75" src="assets/images/aws-small.png" />
</span>
<span *ngIf="account.value=='AZURE'">
<img class="img-responsive h-75" src="assets/images/azure-small.png" />
</span>
{{ account.value}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="full-width">
<mat-select name="cloudString2" [ngModelOptions]="{standalone: true}">
<mat-option *ngFor="let account of apiAccounts" [value]="account.name">
{{account.name}}
</mat-option>
</mat-select>
</mat-form-field>
点击第一个下拉菜单时出现以下错误
core.js:4002 ERROR TypeError: Cannot read property 'value' of undefined
at ApiGatewayComponent.push../src/app/components/manage/api-gateway/api-gateway.component.ts.ApiGatewayComponent.changeIssueTracker
答案 0 :(得分:0)
<mat-option
*ngFor="let account of accountTypes"
[value]="account.value"
(click)="changeIssueTracker(type)">
您的问题是type
未定义。
<mat-option
*ngFor="let accountType of accountTypes"
[value]="accountType.value"
(click)="changeIssueTracker(accountType)">
<span *ngIf="accountType.value=='AWS'">
<img class="img-responsive h-75" src="assets/images/aws-small.png" />
</span>
<span *ngIf="accountType.value=='AZURE'">
<img class="img-responsive h-75" src="assets/images/azure-small.png" />
</span>
{{ accountType.value}}
</mat-option>
就将数据绑定到第二个下拉列表而言,您将需要过滤从api获取的数据并遍历表单字段中的新列表。您已经有了适用于未经过滤的API数据列表的概念。 .component.ts
filteredAccountsByType = [];
changeIssueTracker(type: AccountType): void {
if (type.value === "AWS") {
this.job.issueTracker.accountType = "AWS";
} else if (type.value === "AZURE") {
this.job.issueTracker.accountType = "AZURE";
}
this.filteredAccountsByType = this.apiAccounts.filter(apiAccount => apiAccount.accountType === type.value);
}