Question

我有一个奇怪的问题。

我正在使用 Angular CLI ，我已将材料2 添加到其中。我使用ngfor创建了一些输入，并将它们绑定到ngmodel。一切都很好。

但每当我输入内容时，输入都会被取消选择。

这是组件的HTML代码：

<md-input-container class="treatments" *ngFor="let t of treatment; let i = index">
    <input mdInput placeholder="treatment {{ i + 1 }}" 
      value="{{ t[i] }}" name="treatment_{{ i + 1 }}" [(ngModel)]="treatment[i]">
</md-input-container>

当我删除ngmodel时，它确实可以100％运行。

Answer 1

问题是你试图将ngModel绑定到原始值。您可以通过在@Input()声明之前添加treatment来解决取消选择问题。

@Input() treatment: string[] = [ "treatment 1", "treatment 2"];

但它不会更新数组中的值。如果要更新值，ngModel需要与object属性绑定。我已在此Plnkr中添加了两个示例。

有关详细信息，请参阅此问题 Angular2 ngModel inside of ngFor

Answer 2

您正在迭代基本类型的数组，因此它们按值进行比较。当您更改处理（即t）时，将销毁所有值并创建新值，这会导致字段失去焦点。这可以通过使用trackBy来解决，trackBy通过索引跟踪治疗，并且只会破坏并重新创建您正在修改的治疗。

所以添加<md-input-container class="treatments" *ngFor="let t of treatment; let i = index; trackBy:trackByFn">：

trackByFn(index, treatment) {
  return index;
}

并在TS中添加功能：

UIStackView * menuButtons = [[UIStackView alloc] initWithFrame:CGRectMake(0, 0, 60, 16)];
  menuButtons.axis = UILayoutConstraintAxisHorizontal;
  menuButtons.alignment = UIStackViewAlignmentBottom;
  menuButtons.spacing = 6;
  menuButtons.distribution = UIStackViewDistributionEqualSpacing;

UIButton* btnOne = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 16, 16)];
UIButton* btnTwo = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 16, 16)];
UIButton* btnThree = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 16, 16)];

  [menuButtons addArrangedSubview:btnOne];
  [menuButtons addArrangedSubview:btnTwo];
  [menuButtons addArrangedSubview:btnThree];

Angular 2 Material - 为什么取消选择我的输入？

2 个答案: