如何从Typescript中的* ngFor =“let hero of heros”中引用模板输入变量'hero'

Question

如何从中引用模板输入变量x var x = []; x[1, 2] = 0; console.log(x[2] === 0); 在打字稿里面？

我正在使用有状态组件 所以代码对我的代码中的'heros'等价是：

hero

首次通过ionViewDidLoad显示屏幕时填充。

当我通过底部的按钮添加服务器时，ionViewDidEnter调用相同的加载方法再次填充服务器。

调试时我将通过ionViewDidLoad路径。

[

Answer 1

您正在访问server循环之外的*ngFor变量，这是因为您获得的值未定义，因为ion-item之外的服务器变量未知。尝试在ion-item-options中插入代码<ion-item>，它应该可以正常工作

Answer 2

根据Ionic文档。在ionic-item-sliding上，您必须在＆lt; ion-item＆gt; 之外嵌套＆lt; ion-item-options＆gt; 。

最后我将 * ngFor 放在错误的标签上。

非常感谢 @Sajeetharan 和 @brijmcq 。 你的帖子最后都把我送到写路径。

<强> HTML

<ion-item-sliding *ngFor="let server of servers"> <! <<<-- Moved here -->
     <ion-item detail-push>
         <h1>{{server?.server}} </h1>
         <h2>{{server?.port}} </h2>
         <h2>{{server?.username}}</h2>
         <h2>{{server?.password}}</h2>
      </ion-item>
      <ion-item-options side="left">
         <button ion-button color="primary" 
                 (click)="editServerConfigPage(server)">
            <ion-icon name="redo"></ion-icon>
            Edit
         </button>
         <button ion-button color="danger">
            <ion-icon name="remove-circle"></ion-icon>
            Remove
         </button>
      </ion-item-options>
</ion-item-sliding>

<强>打字稿

editServerConfigPage(server:Server):void {
    console.log('editServerConfigPage()', server);
    this.navCtrl.push('LoginDetailPage', {server: server});
}