时间戳

首页 > 解决方案 > 如果我将 ngIf 与它一起使用，则切换按钮的组属性不起作用

angular - 如果我将 ngIf 与它一起使用，则切换按钮的组属性不起作用

问题描述

当我在切换组中使用 ngIf 时，#group 属性不起作用。

代码：

<mat-button-toggle-group *ngIf="query.noOfQuestions == 05" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group1="matButtonToggleGroup">
    <mat-button-toggle *ngIf="test[0].answer==null" class="margin-right" value="0" checked>01</mat-button-toggle>
    <mat-button-toggle *ngIf="test[1].answer==null" class="margin-right" value="1">02</mat-button-toggle>
    <mat-button-toggle *ngIf="test[2].answer==null" class="margin-right" value="2">03</mat-button-toggle>
    <mat-button-toggle *ngIf="test[3].answer==null" class="margin-right" value="3">04</mat-button-toggle>
    <mat-button-toggle *ngIf="test[4].answer==null" value="4">05</mat-button-toggle>
</mat-button-toggle-group>

<button (click)="test(group1)">Go</button>

在 TS 文件的测试方法中，我尝试使用 group1.value，它返回错误cannot set property 'value' of undefined。

如果我删除行 * ngIf="query.noOfQuestions == 05" ，代码可以正常工作。

请让我知道是否有任何解决方法？

完整的 HTML 代码：

<div *ngIf="test?.length > 0">
    <mat-button-toggle-group *ngIf="query.noOfQuestions == 05" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group1="matButtonToggleGroup">
        <mat-button-toggle *ngIf="test[0].answer==null" value="0" checked>01</mat-button-toggle>
        <mat-button-toggle *ngIf="test[1].answer==null" value="1">02</mat-button-toggle>
        <mat-button-toggle *ngIf="test[2].answer==null" value="2">03</mat-button-toggle>
        <mat-button-toggle *ngIf="test[3].answer==null" value="3">04</mat-button-toggle>
        <mat-button-toggle *ngIf="test[4].answer==null" value="4">05</mat-button-toggle>
    </mat-button-toggle-group>
    <mat-button-toggle-group *ngIf="query.noOfQuestions == 10" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group1="matButtonToggleGroup">
        <mat-button-toggle *ngIf="test[0].answer==null" value="0" checked>01</mat-button-toggle>
        <mat-button-toggle *ngIf="test[1].answer==null" value="1">02</mat-button-toggle>
        <mat-button-toggle *ngIf="test[2].answer==null" value="2">03</mat-button-toggle>
        <mat-button-toggle *ngIf="test[3].answer==null" value="3">04</mat-button-toggle>
        <mat-button-toggle *ngIf="test[4].answer==null" value="4">05</mat-button-toggle>
        <mat-button-toggle *ngIf="test[5].answer==null" value="5">06</mat-button-toggle>
        <mat-button-toggle *ngIf="test[6].answer==null" value="6">07</mat-button-toggle>
        <mat-button-toggle *ngIf="test[7].answer==null" value="7">08</mat-button-toggle>
        <mat-button-toggle *ngIf="test[8].answer==null" value="8">09</mat-button-toggle>
        <mat-button-toggle *ngIf="test[9].answer==null" value="9">10</mat-button-toggle>
    </mat-button-toggle-group>
</div>

<button (click)="test(group1)">Test</button>

标签： angularangular-materialmaterial-uitogglebutton

解决方案

不是对您的原始问题的答案，而是一个如何实现的示例，*ngFor这将有助于清理您的 HTML 代码

<mat-button-toggle-group *ngIf="query.noOfQuestions == 10" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group1="matButtonToggleGroup">
   <div *ngFor="let item of test; let i = index;">
    <mat-button-toggle *ngIf="!item.answer" value="{{i}}">{{i}}</mat-button-toggle>
   </div>
</mat-button-toggle-group>

推荐阅读