Как получить доступ к значению компонента углового материала для использования в директиве *ngIf?

У меня есть эта группа матов-переключателей:

<mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="specific">
      Specific
    </mat-button-toggle>
    <mat-button-toggle value="general" checked>
        General
      </mat-button-toggle>                
</mat-button-toggle-group>

и у меня есть эти 2 поля.

<div *ngIf="group.value == specific">
<mat-form-field id="id">
  <input matInput placeholder="Insert seed Id">
</mat-form-field>
<mat-form-field id="id">
      <input matInput placeholder="Insert affiliate rank">
    </mat-form-field>
  </div>

Как вы можете видеть во втором фрагменте кода, я пытаюсь включить поля в DOM только тогда, когда выбрано значение Specific. Однако это не работает. Я прочитал здесь Как получить доступ к переменной шаблона Angular 2 в ngIf что переменная шаблона недоступна за пределами элемента шаблона и что вместо нее следует использовать @ViewChild. Я нашел это руководство по использованию ViewChild https://blog.angular-university.io/angular-viewchild/. Но речь идет о ссылке на компонент (ColorSampleComponent), который был создан самим пользователем. Я пытаюсь сослаться на свою группу кнопок так:

  @ViewChild(matButtonToggleGroup)
    group: matButtonToggleGroup;

Но это не работает, потому что я не могу импортировать matButtonToggleGroup, я могу только импортировать модуль, но это не одно и то же.

Может ли кто-нибудь дать мне несколько советов о том, как получить значение togglegroup для использования в директиве ngIf? Спасибо


angular angular-material angular5
person Maurice    schedule 31.07.2018    source источник
comment
эти поля внутри формы? если да, то какой метод манипулирования формами вы используете (управляемый шаблоном, реактивный, динамический)? Если вы новичок в формах, начните с просмотра форм и Руководства по реактивным формам.   -  person alphapilgrim    schedule 31.07.2018
comment
Я использую реактивные формы, но, думаю, я буду использовать директиву ngModel, упомянутую rip   -  person Maurice    schedule 31.07.2018
comment
Я рекомендую использовать реактивные формы, это просто более эффективно.   -  person alphapilgrim    schedule 31.07.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете просто использовать NgModel здесь с двусторонней привязкой:

<mat-button-toggle-group [(ngModel)]="toggleValue" #group="matButtonToggleGroup">
<...>
<div *ngIf="toggleValue === 'specific'">

А также, конечно же, определить toggleValue:

export class YourComponent {

toggleValue;
person gizmo    schedule 31.07.2018