Question

我有2个下拉菜单，一个下拉菜单选择 state ，另一个下拉菜单选择服务代理商。为服务代理商显示的选项取决于状态选定的值。

服务代理商和 state 下拉菜单的数据来自profile.service.ts。

问题：当用户选择状态时，如何更改服务代理中的值显示。

profile.component.html

<mat-form-field>
    <mat-select placeholder="Service Agency" required formControlName="serviceAgency">
        <mat-option value="option">Option</mat-option>
        <mat-option value="{{item.id}}" *ngFor="let item of service_agency$">                     
            {{item.name}}  
        </mat-option>  
    </mat-select>
</mat-form-field>

profile.component.ts

//get state
get_state(){
    this.profileService.get_state().subscribe(data => {  
        this.state$ = data; 
    });  
}

//get service center base on state id
onChange(state) {
   this.service_agency$ = this.profileService.get_service_agency()
       .pipe(filter((item)=> item == state.value));

    console.log(this.service_agency$);
}

profile.service.ts

get_state() {
    return this.http.get(url)
        .pipe(map(data => {
            return data;
        }));
}

get_service_agency() {
    return this.http.get(url)
        .pipe(map(data => {
            return data;
        }));
}

Answer 1

在angular中，当您更新任何数据时，它也会在html中反映该数据。

我猜想当您更改state的值时，您将调用API并获取authc.loginUrl = /login.jsp authc.failureKeyAttribute=loginFailure authc.successUrl = /index.jsp # name of request parameter with username; if not present filter assumes 'username' authc.usernameParam = user # name of request parameter with password; if not present filter assumes 'password' authc.passwordParam = pass # does the user wish to be remembered?; if not present filter assumes 'rememberMe' authc.rememberMeParam = remember的新列表。

当您获得新列表时，只需要将该新列表绑定到变量中即可。 Angular会将新列表自动绑定到html中。

service agency

更改状态值时：

<option *ngFor="let item of service_agency$" value=[item.name]>
    {{item.name}}        
</option>

绑定新数据后，新列表将自动显示在onChange(state) { // Get the ref of selected state // Now hear you need to call API and pass state id and get new list of agency this.profileService.get_service_agency().subscribe((data) => { // Clear all data from array and then bind new fresh data this.service_agency$ = []; // Clear this.service_agency$.push(...data); // Bind fresh data // Check data is bind in array properly or not ... console.log("New service list data is ::: " , this.service_agency$); }) }页中。

角度6：基于其他下拉值的下拉显示选项

1 个答案: