如果我使用ngIf，则切换按钮的组属性不起作用

编程问答 2022-08-16

问题描述

当我在切换组中使用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，它返回错误无法设置未定义的属性'value'。

如果我删除行* 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>

解决方法

这不是您原始问题的答案，而是一个如何实现*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>
angularangular-materialmaterial-uitogglebutton