Question

mat-button-toggle 出现了一个非常奇怪的问题。我有以下代码：

<mat-button-toggle-group formControlName="fcCWShowForms" multiple="true">
<mat-button-toggle value="HE" (change)="this.showHe=!this.showHe">
    Button 1
</mat-button-toggle>
<mat-button-toggle value="RAD" (change)="this.showRad=!this.showRad">
    Button 2
</mat-button-toggle>
<mat-button-toggle value="TS" (change)="this.showTS=!this.showTS">
    Button 3
</mat-button-toggle>                  
<mat-button-toggle value="WH" (change)="this.showWH=!this.showWH">
    Button 4
</mat-button-toggle>
<mat-button-toggle value="EE" (change)="this.showEE=!this.showEE">
    Button 5
</mat-button-toggle>

<mat-tab-group formControl="tabgroup">
    <mat-tab label="Section 1">
        <div *ngIf="this.showHe">stuff</div>
    </mat-tab>
    <mat-tab label="Section 2">
        <div *ngIf="this.showRad">stuff</div>
    </mat-tab>
    <mat-tab label="Section 3">
        <div *ngIf="this.showTS">stuff</div>
    </mat-tab>
    <mat-tab label="Section 4">
        <div *ngIf="this.showWH">stuff</div>
    </mat-tab>
    <mat-tab label="Section 5">
        <div *ngIf="this.showEE">stuff</div>
    </mat-tab>
</mat-tab-group>

会发生什么：单击前三个切换按钮中的任何一个都可以100％完美地工作，单击该按钮，适当的选项卡将显示正确的内容。

单击最后两个按钮是奇怪的事情。它会正确设置布尔值（是的，它们都是类中的所有公共布尔值），但是直到您单击页面上的其他按钮，按钮才会显示为单击状态。 div标签会按原样显示，但是在您单击其他按钮之前，按钮看起来好像什么也没做。

除了变量名称和值之外，其他所有内容都相同。它在某一时刻起作用，我什至不认为我做了任何改变。

我也收到错误：在声明以下内容的行上，没有用于表单控件的具有未指定名称属性的值访问器：

<mat-button-toggle value="WH" (change)="this.showWH=!this.showWH">

但是，如果我将其删除，错误将移至其上方的行。如果我添加name =“ blah”，则无济于事。如果我添加formControlName =“在类中创建的控件的名称”，则它没有任何作用。

我应该怎么看才是问题所在？根据我的Google搜索，我已经改变了很多事情，没有解决方案使我摆脱这个问题。显然问题出在代码的其他地方，但我找不到它。对要搜索的内容有何想法？

该组件本身非常复杂，并且是其他组件的子组件，因此完全呈现的页面非常紧张。

正在寻找任何输入。

先谢谢了。如果找到修复程序，我将发布它！布拉德

我没有使用NgModel，我正在使用反应式表单。

Answer 1

我发现了问题。这是mat-tabs中的HTML代码。这些标签内的不同表单控件上混合了(NgModel)和formControlName。基本上，我忘记了这些标签的存在。一旦我清理了它们，按钮就固定了。

我对Angular还是有点陌生，这是一个庞大的页面，其中包含许多活动部件。艰苦学习这些东西总是好事，因为那样的话您就会真正学习它们。

我希望这会在将来对某人有所帮助。

谢谢，布拉德

角垫按钮切换组倍数= true和垫按钮切换奇数

1 个答案: