Angular 根据角度8“材质”中的第一个下拉选择显示第二个下拉值

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

至于将数据绑定到第二个下拉列表，您需要过滤从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);
}

---

在

*ngFor*

循环中定义的

类型在哪里？应该是
账户。accountType
？实际上，我正在尝试根据第一个下拉列表选择更改第二个下拉列表值，因此我添加了（单击）=“changeIssueTracker（type）”功能。我不清楚当我点击时这种变化是如何发生的。嘿，安德鲁，事实上第一个下拉菜单对我有效，但问题是第二个下拉菜单。我正在尝试填充第一个选择的第二个下拉列表。与此类似，您的错误指向第一个下拉列表。这个评论是对原始程序的补充吗？是的，当然，问题在于第二个下拉列表。我试图显示第一个下拉选择的对应值。例如，“accountType”：“AWS”，那么我们有“名称”：“a”，“名称”：“aws2”和“名称”：“FX AWS”，所以我想在从第一个下拉选择AWS时显示所有这3个值。类似地，“accountType”：“AZURE”我们有“name”：“AZURE”。所以我想显示Azure相关数据（名称）。如何在单击第一个下拉列表时绑定此数据？这听起来像是一个新问题，超出了修复您遇到的错误的原始步骤。
<mat-option
  *ngFor="let account of accountTypes"
  [value]="account.value"
  (click)="changeIssueTracker(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>

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);
}