Angular 加载新ng容器时未初始化表单值

Plunkr

链接：

我的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>

星期一是数组

wdays

中的第一个值，该数组正在循环创建复选框（如果不清楚的话）

我只收到此错误，对于

星期二

，我没有收到相同的错误。这一点自始至终都是一致的。当我选择一个差异

visitFrequency

时，我仍然会收到错误，但仍然只会收到循环通过的数组的第一项

---

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

我知道你现在有什么问题。这是关于

ngModelGroup

的误用。您在启动之前使用它的值

请参阅

[class.active]=“f.value.weekday[wday]”

，如果从plunkr中删除此代码，它将正常工作。当然，这不是你想要的

#1 看到我的叉子砰的一声了吗。 我创建一个

checkClass

来记录表单的值。显然，

ngModuleGroup

会在第二轮更改检测之前获取其子控件的值

这是避免错误的糟糕方法，因为每次更改检测都会调用该方法

#2 还有另一种方法，请参阅此参考：此参考问题

您可以创建一个指令来检测开关盒的启动。然后将初始值对象（如

{monday:''，beday:''/…}

分配给

ngModelGroup

），这样您就不会得到性能更好的错误

#3 忘记提到一个本机支持，比如

f.value？.weekday？[wday]

。

---

. 解决方法应该是

f.value？。工作日和&f.value。工作日[wday]

信息不足以回答问题。首先，您可能会错过place

ngSwitchDefault

。其次，您的输入标记必须误用

ngModel

。最后，您没有提到其余的数组数据是否显示良好。您还需要什么信息？除此之外，我也无法获得更多信息。在

ngSwitchDefault

上有很好的捕捉。你说后者是什么意思？为什么它必须误用ngModel？我使用的是模板驱动的方法。您不需要在

ngModel

上绑定任何东西，也不需要将任何东西绑定到

ngModel

。这不是误用，如果您不打算在组件中使用输入，而只将值保存到表单中，这是标准做法。对不起，我以前没有见过这种方法。这不是一个常见的用例。顺便说一句，重现问题的最好方法是创建一个plunkr来显示问题，你可以试试我的plunkr模板。我仍然对为什么会发生这种情况感到震惊。您所说的是误用，您是否会以这种方式使用

ngModelGroup

？我在其他地方看到了完全相同的实现。我添加了另一种方法。您的误用是因为您将它与动态初始化和销毁视图的

ngSwitch

一起使用。这反映了相同的表单数据结构。如果你有任何问题。请告诉我。谢谢你的解释。但是，您的#3解决方案为我抛出了以下错误：

条件表达式f.value？.weekday？[wday]需要在表达式[f.value？.weekday？[wday]]的末尾使用所有3个表达式。

很抱歉，听起来像。解决方案3目前非常适合，我将注意对角度语法的更改。

ERROR TypeError: Cannot read property 'Monday' of undefined