根据 angular 8、material 中的第一个下拉选项显示第二个下拉值

Question

我正在尝试提取数据并将该数据绑定到下拉列表中，并根据第一个下拉列表的选择我想填充第二个下拉列表。 为此，我编写了以下代码。 但我没有得到正确的输出。 相反，我收到了错误。 请查看我的代码，因为我对 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>
                                        &nbsp;&nbsp;{{ 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

Answer 1

<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>
      &nbsp;&nbsp;{{ 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);
}