角度材质幻灯片切换不更改边界变量

Question

我有两个奇怪的问题。我有一个包含大量输入字段的大表单。这很好。我想在底部添加一个幻灯片切换，它会更改一个影响整个表单样式的变量。

我的第一个问题是，在单击幻灯片切换之前，变量不会显示。

HTML

<mat-slide-toggle [(ngModel)]="ifPrint" name="ifPrint" id="ifPrint" ></mat-slide-toggle>

<div>
  {{ifPrint}}
</div>

零件

export class PrintReviewDetailsComponent implements OnInit {
ifPrint = true;
}

页面加载时ifPrint变量为空

第二个问题是

当单击幻灯片切换时，包含变量的div显示为true，但是当我单击切换到关闭位置时，ifPrint变量保持为true并且不会更改。

我已经创建了一个blitz，它在那里使用相同的代码正常工作，所以我不确定为什么我在我的页面上有这些问题。

控制台说：

Error: No value accessor for form control with name: 'ifPrint'

编辑：我更新了stackblitz以包含表单的html，现在它无法正常工作。

Answer 1

您的updated stackblitz无法重新创建您共享的问题......但是从您的问题来看，以下两个问题针对表单和样式进行了解决：

• 在单击切换之前，默认情况下不会显示切换值
• 切换时，切换值没有改变
• 现在正根据切换值更新样式

相关TS：

  model:any;
  constructor(){
    this.model = {name: '' , age: null, ifPrint: false};
  }

相关HTML：

<form (ngSubmit)="formSubmit()" #demoForm="ngForm"  >
  <div [ngClass]="model.ifPrint === true ? 'trueClass' : 'falseClass'">
  <input type="text"  placeholder="Enter Name" #name="ngModel" [(ngModel)]="model.name" name="name" />
   <br/>
  <input type="number"  placeholder="Enter Age" #age="ngModel" [(ngModel)]="model.age" name="age" />  <br/>
  <mat-slide-toggle #ifPrint #age="ngModel" [(ngModel)]="model.ifPrint" name="ifPrint"></mat-slide-toggle> {{model.ifPrint}} <br/>
  </div>
<button type="submit"> Submit </button>
</form>

检查一个最小的，working demo here你正在尝试...希望它有帮助...

Answer 2

除了mat-slide-toggle之外，我删除了模板中的所有内容，它按预期工作。

我认为问题是因为你的html模板引用了你的组件没有的方法或属性，或者试图访问某个地方的null或undefined属性导致了这个问题。

检查控制台是否有错误，如果你修复了这些错误，幻灯片切换应该按预期工作。