Показать md-select, если другое md-select - выбранное значение = concrete_value

Question

У меня есть два md-select:

<form (ngSubmit)="someAction(f)" #f="ngForm">
   <md-select
       #selectedHolidayType
        placeholder="Holiday type"
        name="holiday_type"
        [(ngModel)]="holiday_type"
    >
   <md-option *ngFor="let type of types" [value]="type.typeId">{{ type.typeName}}</md-option>
   </md-select>

<md-select
     *ngIf="selectedHolidayType === 19"
     placeholder="Some placeholder"
     name="option"
     [ngModel]="option"
>
      <md-option *ngFor="option of options" [value]="option.id">{{option.value}}</md-option>

</md-select>
</form>

Как я могу показать второй md-select, только если для первого выбранного md-select установлено то, что я хочу, в данном случае - 19.

Или, может быть: как я могу получить выбранное значение первого md-select в шаблоне HTML?

Я уже попробовал:

*ngIf="holiday_type === 19"
*ngIf="selectedHolidayType.selected === 19"
*ngIf="selectedHolidayType.selected.value === 19"

Но ничего из этого не работает.

Спасибо за любую помощь!

Answer 1

Я не знаю, почему это не сработало, когда ты пытался *ngIf="holiday_type === 19",

Вот пример того, как это работает,

<form>
  <md-select placeholder="Holiday type"
      name="holiday_type"
      [(ngModel)]="holiday_type">
    <md-option *ngFor="let type of types" [value]="type.typeId">{{ type.typeName }}</md-option>
  </md-select>

  <!-- Only show when 19 is selected -->
  <md-select *ngIf="holiday_type === 19"
      placeholder="Some placeholder"
      name="option"
      [(ngModel)]="option">
    <md-option *ngFor="let option of options" [value]="option.id">{{ option.value }}</md-option>
  </md-select>

</form>

Answer 2

Хорошо, я нашел ответ:

 <md-select
       #selectedHolidayType
        placeholder="Holiday type"
        name="holiday_type"
        [(ngModel)]="holiday_type"
    >
   <md-option *ngFor="let type of types" [value]="type.typeId">{{ type.typeName}}
   </md-option>
</md-select>

<div *ngIf="holiday_type > 0">

    <md-select
     *ngIf="holiday_type == 19"
     placeholder="Some placeholder"
     name="option"
     [ngModel]="option"
    >
      <md-option *ngFor="option of options" [value]="option.id">{{option.value}}
    </md-option>

  </md-select>

</div>

Не знаю почему, но если я заверну md-select в div, это сработает!

Я бы очень признателен, если бы кто-то мог объяснить это поведение:)