0

Plunkr链接：https ://plnkr.co/edit/MOQ1evhsAocw3cJrYM0q?p=preview

ngSwitch我的HTML 模板中有以下代码：

<ng-container [ngSwitch]="f.value.visitFrequency">
  <ng-container *ngSwitchCase="'weekday'">
    <div class="row form-group" ngModelGroup="weekday">
      <div class="btn-group btn-group-justified" data-toggle="buttons" role="group">
        <label class="btn btn-info"
               *ngFor="let wday of wdays" 
               [class.active]="f.value.weekday[wday]">
          <input type="checkbox"
                 [name]="wday"
                 [id]="wday"
                 ngModel
                 [value]="wday">{{ wday }}
        </label>
      </div>
    </div>
  </ng-container>
  <ng-container>
    <div class="row form-group" *ngSwitchDefault>
      <p>Please choose something</p>
    </div>
  </ng-container>
</ng-container>

我有一个单选按钮组，它选择一个值，然后设置为visitFrequency，例如weekday。现在，每当我选择这个（其他可能的值相同）时，我都会收到以下错误：

ERROR TypeError: Cannot read property 'Monday' of undefined

Monday 是数组wdays中循环创建复选框的第一个值（如果不清楚的话）。

我只收到此错误，我没有收到相同的错误Tuesday。这始终是一致的。当我选择一个差异时visitFrequency，我仍然收到错误，但同样只有正在循环的数组的第一项。

我怀疑表单值尚未启动，因此引发了错误。问题是在加载组件时它不会发生。

4

1 回答 1

1

我知道你现在有什么问题。这是你对ngModelGroup. 你在它启动之前使用它的价值。

看[class.active]="f.value.weekday[wday]"，如果您从 plunkr 中删除此代码，它工作正常。当然，这不是你想要的。

#1

见我的叉 plunkr https://plnkr.co/edit/CYkVFt4mb7sq98riviIZ?p=preview。我创建了一个checkClass记录表单的值。显然，ngModuleGroup在第二轮变化检测之前获取其子控件的值。

这是避免错误的一种不好的方法，因为每次更改检测都会调用该方法。

#2

还有另一种方法，请参阅此参考：this reference issue Angular2 calling custom function after ngSwitch new view is created。

您可以创建一个指令来检测 switch case 的启动。然后将初始值对象赋值{monday: '', tuesday: '' //...}为ngModelGroup，那么你可能不会得到更好的性能错误。

#3

忘了提一个原生支持，喜欢f.value?.weekday?[wday]. Angular 还不支持类似的arr?[x]语法。解决方法应该是f.value?.weekday && f.value.weekday[wday]

于 2017-08-07T16:48:19.840 回答