отображать вторые раскрывающиеся значения на основе первого раскрывающегося списка в angular 8, материал

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>

При нажатии на первое раскрывающееся меню * 1015 я получаю сообщение об ошибке ниже. *

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