Question

在我的模板中使用一组带有id输入的列组件：

<div class="panel-body" *ngIf="columns">
  <div class="col-md-4">
      <column [id]=columns[current_left_column].Id></column>
  </div>
  <div class="col-md-4">
      <column [id]=columns[current_middle_column].Id></column>
  </div>
  <div class="col-md-4">
      <column [id]=columns[current_right_column].Id></column>
  </div>
</div>

我有通过更改current_left_column，current_middle_column和current_right_column的值来递增和递减列的按钮。当我单击这些按钮时，我会记录三列id的值，它们代表它们应该在哪里但是模板不会重新加载。

我确实尝试使用ApplicationRef.tick（）来触发变更检测，但事实上它并没有改变，这让我认为这是一个绑定问题，但我到目前为止还无法找到任何符合我案例的内容。双向绑定似乎需要一个更传统的输入元素，它目前只有一种方式。

Answer 1

我认为您需要更改输入的名称。我已多次看到它与每个HTML元素的id属性发生冲突。

Answer 2

我非常感谢给出的评论和信息，它帮助我更好地处理了我实际上要做的事情。

我最后从一个不同的答案中拿了一个例子，并使用带有输入的ngModel来显示各个列的id。然后，因为我可以证明我的id正在切换但是即使使用tick（）我也没有更新。我意识到我正在处理一个组件级别太高而且必须从Column级别启动更改。所以我采用了ngOnInit方法，用数据填充列并将其放在ngOnChanges（）方法中，清除OnInit（），因为它加倍了，它开始正常运行。

然后我不得不处理在前一列顶部添加的列中的信息，但这是相对较小的。

ngOnChanges(){
  this._columnService.GetSingleColumn(this.id).subscribe(column => { this.columnData = column; });
  this._cardService.GetCardsByColumnId(this.id).subscribe(cards => { this._cardColumnService.LoadCards(cards); console.log(this.cards); });
  if (this.columnData == undefined) {
    this.LoadDummyData();
  }
}

Angular 2在点击时更改模板输入值

2 个答案: