0

案例：我有一系列答案，我想在视图中显示为无线电输入。当其中一个答案已经被回答时，它必须被[选中]，如果它被[选中]，则显示文本区域，到目前为止一切都很好。

接下来我想检查另一个单选输入，我希望取消选择当前选择并隐藏它的文本区域，然后应该[选中]新选择的单选输入并且它的文本区域应该显示。

我使用 FormBuilder 和 FormArray 并有以下问题。

  • 如果没有内插，我就不能使用index，我看到很多没有使用索引的例子。
  • 如果我选择另一个无线电输入，首先我的数据会消失并且没有被选中，然后在第二次单击时它会被选中，但现在两者都被选中。

初始状态 点击另一个收音机

在此处输入图像描述 - 我无权访问选中的事件，我可以使用 {{tempVar.checked}} 在视图中显示它，如上所示，如果我使用模板变量#tempVar，但我无权访问它下面的文本区域*ngIf="tempVar.checked"。如果我确实在 ngIf 中使用它，我会收到以下错误

检查后表达式已更改。以前的值：“假”。当前值：“真”。

问题：

  • 这是正确的方法吗？
  • 带有 FormBuilder 和带有 Radio 输入的 FormArray 的反应式动态表单示例

这是我的代码 https://gist.github.com/webwizart/121c85a0f316f47977cc0c99455af7bf

4

1 回答 1

0

我认为应该为唯一标识符保留使用标签？如果 dom 渲染器将更新所有具有相同 id 的元素，我不会感到惊讶。

不确定这是否有帮助，但您可以改用答案视图模型（包含相同的数据），但它也具有“已检查”属性

通过这种方式，您可以确定它会按照您的预期运行。

例如：（在您的 component.ts 中）

let answers =  this.question.Question.PossibleAnswers
.map(a => 
 { return Object.assign({}, a, { checked: false });
 }
);

然后在 html 中使用：'answer.checked' 而不是 'radio.checked'

ps：您也可以使用 ng-container 代替 span，因此您的 html 中没有额外的 DOM 印记

于 2017-01-05T18:42:32.223 回答