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

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

代码：

01
02
03
04
05

Go

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

01
02
03
04
05
01
02
03
04
05
06
07
08
09
10
试验

不是对原始问题的回答，而是一个如何实现

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

{{i}

很明显，由于您的

*ngIf

语句，您试图获取一个不再存在于DOM中的对象。一个可能的解决方案是隐藏按钮，而不是将其从DOM中删除。但是，对于您提供的代码，我无法再为您提供任何帮助，也许提供你的ts和css也适用。你建议我如何隐藏按钮？基本上有一张支票！如果noOfQuestion=05，则显示该组；如果其等于10，则显示另一组。隐藏按钮是否也会与值重叠？

ngClass

将

不透明度设置为0，将
鼠标事件设置为无可能，同样很难帮助您处理您提供的小片段，没有示例：我在上面添加了更多HTML代码。我希望这对理解这个问题有足够的帮助。谢谢。你在HTML中重复了很多代码，我会研究如何使用
*ngFor
，这将帮助你最大限度地减少代码，至于你的原始版本，我需要看看你的打字脚本/javascript，一些cssI尝试了你的建议。现在，对于超过5个按钮，它会跳出屏幕。到目前为止还没有应用css。如何在第二行显示5+按钮？我需要查看您的CSS和JS/TYPESCRIPT来帮助您！我在另一个问题的帮助下找到了答案。感谢您建议使用NGF，因为它使我的代码小得多。
<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>

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