Question

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

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

<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

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

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

我怀疑表单值尚未启动，因此会抛出错误。问题是，在加载组件时不会发生这种情况。

Answer 1

我知道你现在的问题是什么。这是你对ngModelGroup的误用。您在启动之前使用其值。

请参阅[class.active]="f.value.weekday[wday]"，如果您从plunkr中删除此代码，则可以正常使用。当然，这不是你想要的。

＃1

请参阅我的fork plunkr https://plnkr.co/edit/CYkVFt4mb7sq98riviIZ?p=preview。我创建了一个checkClass来记录表单的值。显然，ngModuleGroup获得其子控件的值，直到第二轮变化检测。

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

＃2

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

您可以创建一个指令来检测开关案例的启动。然后将{monday: '', tuesday: '' //...}之类的初始值对象分配给ngModelGroup，那么您可能不会因为更好的性能而获得错误。

＃3

忘记提及一个原生支持，~~，如f.value?.weekday?[wday]~~ 。 Angular haven't support the syntax like arr?[x] yet。解决方法应为f.value?.weekday && f.value.weekday[wday]

加载新ng-container时未初始化表单值

1 个答案:

＃1

＃2

＃3