Question

我有这个mat-toggle-group：

<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>

我有这两个字段。

<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中。但是，这不起作用。我在这里读过How to access Angular 2 template variable in ngIf 模板变量在模板元素外部不可访问，我应该使用@ViewChild来代替。我找到了有关如何使用ViewChild https://blog.angular-university.io/angular-viewchild/的教程。但是它涉及到引用由用户自己制作的组件（ColorSampleComponent）。我试图像这样引用我的buttontogglegroup：

  @ViewChild(matButtonToggleGroup)
    group: matButtonToggleGroup;

但是它不起作用，因为我无法导入matButtonToggleGroup，我只能导入模块，但那不是同一件事。

任何人都可以给我一些关于如何获取在ngIf指令中使用的togglegroup值的指针吗？谢谢

Answer 1

您可以在此处简单地使用NgModel进行两种方式绑定：

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

当然也要定义toggleValue：

export class YourComponent {

toggleValue;

如何访问* ngIf指令中使用的角材分量的值？

1 个答案: