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

【问题标题】：Group property of toggle-button not working if I use ngIf with it如果我将 ngIf 与它一起使用，则切换按钮的组属性不起作用
【发布时间】：2020-08-18 04:04:25
【问题描述】：

当我在切换组中使用 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>

【问题讨论】：

很明显，由于您的*ngIf 语句，您正试图抓取一个不再在 DOM 中的对象，一个可能的解决方案是隐藏按钮而不是从DOM 但是我无法为您提供任何帮助，除了您提供的代码，也许提供您的 ts 和 css 也适用
你建议我如何隐藏按钮？基本上有支票！如果 noOfQuestion = 05，它会显示这个组，如果它等于 10，它会呈现另一个组。不只是隐藏按钮也会重叠值吗？
ngClass opacity 设置为 0 和 mouse-events 设置为 none 也许，再次很难帮助您提供您提供的小 sn-p 并且没有示例：stackoverflow.com/help/minimal-reproducible-example
我在上面添加了更多的 HTML 代码。我希望它对理解这个问题有足够的帮助。谢谢。
您在 HTML 中重复了很多代码，我会考虑使用 *ngFor 它会帮助您最大限度地减少代码，至于您的原始问题，我需要查看您的打字稿/javascript 和一些 css

标签： angular angular-material material-ui togglebutton

【解决方案1】：

不是对您最初问题的回答，而是如何实现 *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>

【讨论】：

我尝试了你的建议。现在对于超过 5 个按钮，它会出现在屏幕之外。 See here。到目前为止还没有应用 css。如何在第二行带上 5+ 按钮？
我需要查看您的 CSS 和 JS/TYPESCRIPT 来帮助您！
我在另一个问题的帮助下弄清楚了。感谢您建议使用 ngFor，它使我的代码更小。