如何从 *ngFor=“let hero of heros"中引用模板输入变量“hero"?在打字稿里面 [英] How can you reference template input variable 'hero' from *ngFor="let hero of heros" inside Typescript

问题描述

如何引用模板输入变量hero from*ngFor="let hero of heros"在 Typescript 里面?

How can you reference template input variable hero from *ngFor="let hero of heros" inside Typescript?

我正在使用有状态组件所以我的代码中的英雄"等价物的代码是:

I'm using a stateful component So code has this for the 'heros' equivalent in my code is:

   servers: Server[];

当屏幕首次出现时通过 ionViewDidLoad 填充.

It is populated when screen first appears via ionViewDidLoad.

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

When I add the server via button at bottom, ionViewDidEnter calls same loading method to populate servers again.

调试时我会通过 ionViewDidLoad 路径.

When debugging I'm going via ionViewDidLoad path.

[

推荐答案

根据 Ionic 文档.在 ionic-item-sliding 你必须嵌套 <ion-item-options> <ion-item>.

Per the Ionic documentation. on ionic-item-sliding you have to nest <ion-item-options> outside <ion-item>.

结果是我把 *ngFor 放在了错误的标签上.

It ended up being a case of me putting the *ngFor on the wrong tag.

感谢 @Sajeetharan 和 @brijmcq.你的两个帖子最终都让我走上了写作之路.

Thank you both @Sajeetharan and @brijmcq. Both your post sent me down the write path in the end.

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});
}

这篇关于如何从 *ngFor=“let hero of heros"中引用模板输入变量“hero"?在打字稿里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！