Question

从选择列表中选择一个选项时，默认情况下，另一个选择列表应采用一个。

示例：第一个“选择”是文档类型（身份证，护照等），因此，如果我选择“身份证”选项，则在第二个选择中是国家列表，应从该列表中选择一个国家。但我无法在应用程序的Typescript或javascript中实现这一部分。请帮助

我正在将Angular 6与Angular Material一起使用

HTML代码：

<mat-form-field class="inputEde-form">
  <mat-label>Tipo Documento</mat-label>
  <mat-select name="documentType" id="documentTyps" 
              formControlName="DocumentTypeid"
              [ngClass]= "{'is-invalid': submitted && f.DocumentTypeid.errors}"
              (selectionChange)="setCountryByDocumentType($event)" required>
     <mat-option *ngFor="let DT of DTypes" [value]=DT.id>{{DT.documentType}}</mat-option>
                </mat-select>
                <mat-error *ngIf= "f.DocumentTypeid.errors?.required">Por favor seleccione este campo</mat-error>
</mat-form-field>

<mat-form-field class="inputEde-form">
              <mat-label> Pais de Residencia </mat-label>
              <mat-select formControlName="CountryCode" id="countriesList" required>
                <mat-option *ngFor = "let s of CountryCodes" [value] = s?.Code> {{s?.Country}}</mat-option>
              </mat-select>
              <mat-error *ngIf="f.CountryCode.errors?.required">Por favor seleccione este campo</mat-error>
            </mat-form-field>

Answer 1

首先，我相信您需要将（onSelectionChange）用于第二个垫选标签

<mat-select name="documentType" id="documentTyps" 
      formControlName="DocumentTypeid"
      [ngClass]= "{'is-invalid': submitted && f.DocumentTypeid.errors}"
       required>
       <mat-option (onSelectionChange)="setCountryByDocumentType($event)" *ngFor="let DT of DTypes" [value]=DT.id>{{DT.documentType}}</mat-option>
</mat-select>

使国家代码成为可观察的代码（您可能需要进行一些导入）
```
import { Observable, of } from rxjs;

countryCodes : Observable<any[]>
```

在setCountryByDocumentType方法中

setCountryByDocumentType(event){
    if(event.isUserInput){
        console.log(event.source.value)
        if( event.source.value == something ){
            this.countryCodes = of(//The array you wish to pass);
        } 
    }
}

最后，您应该更改第二个垫子选择

<mat-select formControlName="CountryCode" id="countriesList" required>
        <mat-option *ngFor = "let s of CountryCodes | async" [value] = s?.Code> {{s?.Country}}</mat-option>
</mat-select>

从选择列表中选择一个选项，并使用JavaScript / Angular / TypeScript选择另一个选择列表

1 个答案: