Как скрыть указанную опцию c в выпадающих значениях при объединении двух выпадающих в Angular - PullRequest
Новая
       43

Как скрыть указанную опцию c в выпадающих значениях при объединении двух выпадающих в Angular

1 голос
/ 20 февраля 2020

У меня есть выпадающий список с именем страна , который имеет 3 значения "Индия, Китай, Австралия" , и у меня есть выпадающий список с именем позиция , которая имеет 3 значения "разработчик приложения, разработчик приложения - WW, разработчик приложения -GEO".

Я хочу показать все 3 значения второе раскрывающееся меню, когда страна отличается от Индии.

для Индии должен отображаться только разработчик приложения 

<mat-form-field class="no-bord">
                                            <mat-select [ngClass]="isValidCountry?'sb-push-unread':'sb-push-read'" id="country" tabindex="21" (ngModelChange)="onChangeCountry($event)" name="country_code" [(ngModel)]="requestData.country_code" class="form-control form-control-cust">
                                                <mat-option value="" selected>Select Physical Country</mat-option>
                                                <mat-option *ngFor="let ele of geocountry" [value]="ele.country_id">{{ele.country_name}}</mat-option>
                                            </mat-select>
                                        </mat-form-field>


    <mat-form-field class="no-bord">
                                            <mat-select [ngClass]="isValidjobrole?'sb-push-unread':'sb-push-read'" #offr="ngModel" tabindex="17" class="form-control form-control-cust offering" (ngModelChange)="onChangeJobrole($event)" name="job_role" [(ngModel)]="requestData.job_role">
                                                <mat-option value="" selected>Select Job Role</mat-option>
                                                <mat-option *ngFor="let ele of jobrole" [value]="ele.JOB_ROLE_ID">{{ele.JOB_ROLE_NAME}}</mat-option>
                                            </mat-select>
                                        </mat-form-field>

Мой файл TS указан ниже:

onChangeGeo (newgeoindex) {

this.requestData.country_code = '';
this.requestData.msc_location = '';
this.nocountry = false;
this.geocountry = [];
this.msccountry = [];
this.msccity = [];
this.isothercity = false;
this.maincity = " ";
this.othercitydata = " ";
for (let geo of this.masterData['geo_country']) {
  if (geo.geo_id == newgeoindex) {
    this.requestData.geo = geo.geo_name;
    this.requestData.geo_code = geo.geo_code;
    this.geocountry = geo.countries;
  }
}

}

Ответы [ 2 ]

1 голос
/ 21 февраля 2020

еще один способ

введите описание ссылки здесь appcomponent. html

<select (change)="onSelected($event)">
  <option value="select"> select </option>
  <option *ngFor="let country of countries" [value]="country.id">{{country.countryName}} </option>
</select>
<hr>
<select>
  <option> select</option>
  <option *ngFor="let dev of developers"  > {{dev.devName}} </option>
</select>

app component.ts 

import { Component, ChangeDetectionStrategy } from '@angular/core';
import {countries, developers} from './model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent  {
  constructor(){}
  countries = countries as Array <any>;
  developers : any ;
  onSelected(country){

      return (+country.target.value !== 1 || country.target.value === 'select') ? this.developers = this.developers.filter(val => val.id === 1) : this.developers = developers;
  }
}
1 голос
/ 20 февраля 2020

Вы можете найти рабочий пример здесь 1. (using RXJS way) StackBlitz Link

Вы можете найти рабочий пример здесь 2. (using simple component way) StackBlitz Link

Вы можете найти рабочий пример здесь 3. (using pipe) StackBlitz Link

Выше три различных способа выполнения в соответствии с вашим требованием.

app.component. html

<select (change)="onSelected($event)">
    <option>select </option>
    <option *ngFor="let country of countries" [value]="country">{{country}} </option>
</select>
<hr>
<select>
   <option> select</option>
   <option *ngFor="let dev of developers"> {{dev}} </option>
</select>

app.component.ts 

export class AppComponent  {
   countries = ['India', 'China', 'Australia', 'USA'];
   developers = ["application developer" ,"application developer- WW", "application developer -GEO"];
   developersCopy = ["application developer" ,"application developer- WW", "application developer -GEO"];
   onSelected(country){
      if (country.target.value === 'India'){
         this.developers = this.developers.filter(val => val.toString() === 'application developer')
   }else{
     this.developers = this.developersCopy;
   }
  }

Это очень быстрое решение для справки, поскольку вы не собираетесь рассказывать о своем подходе к решению. Существует множество способов улучшить это решение.

...