角度参考 ngIf 到来自 ngFor 的动态命名变量答案

【问题标题】：Angular reference ngIf to dynamic namined variable from ngFor角度参考 ngIf 到来自 ngFor 的动态命名变量
【发布时间】：2018-04-06 22:28:21
【问题描述】：

我想访问以下 ngIf 中的输入元素，以检查它当前是否具有特定值。这里不工作的部分是ngIf 中的代码。

<span *ngFor="let item of items;let i=index">
      <input type="text" #[InputItem+i] value="{{item}}"/>
      <div *ngIf="('InputItem'+i).value" >
        I'm focused!
      </div>
</span>

【问题讨论】：

在组件中访问您的输入元素。ts 在其中编写一个布尔方法来验证您的条件并在您的 ngIf 中使用该方法（始终将您的逻辑写在类中而不是在视图中，最好用于绑定和代码可读性）
@Maxime Gélinas ，因为它不是业务逻辑，而且或多或少只是可靠地向用户显示一点提示，所以我认为它应该到目前为止应该在视图中。跨度>
stackblitz.com/edit/angular-mewimc?file=app/app.component.ts
@yurzui 这就是我想要的行为，谢谢。
@littleraspy 组件负责显示，所以样式逻辑可以去那里（你也会得到更好的智能感知）。在我看来，业务逻辑应该放在你的模型中，这样你就不会混合表示和业务逻辑。它基本上是 MVC 模式。

标签： angular binding

【解决方案1】：

<span *ngFor="let item of items;let i=index">
  <input type="text" value="{{item}}"/>
  <div *ngIf="InputItem[i]" >
    I'm focused!
  </div>

声明变量 InputItem:[] 作为数组

尝试将 InputItem 声明为 arry，例如 InputItem[0] = false,InputItem[1] = false 同样，您可以在需要基于条件时更新变量

【讨论】：