Angular 2单击时更改模板输入值答案

【问题标题】：Angular 2 change template input values on clickAngular 2单击时更改模板输入值
【发布时间】：2016-09-29 02:57:44
【问题描述】：

在我的模板中使用一组带有 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() 来触发更改检测，但它没有更改的事实让我认为这是一个绑定问题，但到目前为止我无法找到任何与我的情况相匹配的内容2 向绑定似乎需要更传统的输入元素，目前它是一种绑定。

【问题讨论】：

你必须在模板中放置“ arround 变量：
没有改变整体问题，但感谢您对正确样式的点头，所以谢谢。
你能告诉我们你的按钮的代码，以及你绑定它以增加你的值的方式吗？
我只是增加三个值并在超过最小索引或最大索引时处理环绕。

标签： javascript html angular typescript

【解决方案1】：

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

【讨论】：

【解决方案2】：

我非常感谢所提供的 cmets 和信息，它帮助我更好地处理了我实际尝试做的事情。

我最终从不同的答案中举了一个例子，并使用带有输入的 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();
  }
}

【讨论】：