模板中的局部变量返回 null（离子）答案

【问题标题】：Local variable in template returning null (ionic)模板中的局部变量返回 null（离子）
【发布时间】：2017-09-13 03:53:45
【问题描述】：

我正在使用 Angular 和 Ionic，并且我试图读取模板中的局部变量，但是当我在 ion-item 上使用 *ngIf 时，即使为 true，数据也变得不可用。如何解决这个问题？还是Bug？

请打开我的plucker，点击按钮查看局部变量p2没有返回是因为*ngIf ...

See in plunker code sample problem

模板上的片段

<ion-content class="has-header">
  <div padding style="text-align: center;">
    <h1>Ionic 2 Test</h1>
  </div>
  <ion-item >
    <p #p1>10</p>
  </ion-item>
  <ion-item *ngIf='visible'>
    <p #p2>20</p>
  </ion-item>
  <button block (click)='show(p1?.textContent,p2?.textContent);'> Click-me and you'll see that p2 does not recover </button>
  <ion-item>
    <p style='text-align: center;'>{{ backtemplate }}</p>
  </ion-item>
</ion-content>

组件上的简单函数

show(p1,p2){
  this.backtemplate = p1+' AND '+p2;

}

【问题讨论】：

尝试使用双引号，例如 *ngIf="visible"
@Deepak 不幸的是它没有区别。
你在哪里切换“可见”属性的值？
hmm.. 尝试不使用? 它甚至无法找到 p2.. 可能是由于 Angular 的变化检测而没有设置 ID #p2？
*ngIf 照常工作，如果元素没有在 html 中直接引用。当与元素引用一起使用时，ngIf 似乎无法正常工作。一种选择是使用变量并将它们与 p 元素绑定，或者如果你想引用元素，你可以试试这个：plnkr.co/edit/qXQAZMksHF1qzeW0zNrs?p=preview

标签： angular ionic-framework ionic2

【解决方案1】：

正在测试代码的所有可能性并使用[*ngIf]="visibile" 而不是*ngIf="visible" 解决了这个问题。

现在的问题是我无法解释为什么它会这样工作，很抱歉，但代码工作正常。

【讨论】：

实际上它似乎起作用了，因为*ngIf 不再起作用了..它与删除 ngIf 相同..