如何在 Typescript 中从 *ngFor="let hero of heros" 引用模板输入变量 'hero'答案

【问题标题】：How can you reference template input variable 'hero' from *ngFor="let hero of heros" inside Typescript如何在 Typescript 中从 *ngFor="let hero of heros" 引用模板输入变量 'hero'
【发布时间】：2018-01-19 09:39:19
【问题描述】：

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

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

   servers: Server[];

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

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

调试时我会通过 ionViewDidLoad 路径。

[

【问题讨论】：

你想要哪一个？对于每个 ngFor 条目，您将有许多 hero 变量
@Maximus - 我选择编辑的那个...
问题是你正在访问 *ngFor 之外的服务器变量

标签： angular typescript ionic3

【解决方案1】：

根据 Ionic 文档。在ionic-item-sliding 上，您必须将嵌套在之外。

结果是我把 *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});
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

也许你可以在函数中传递它

<div *ngFor="let hero of heros">
  <li click="print(hero)">{{hero}}</li>
</div>

在 TS 内部，

print(hero:Hero){
 console.log(hero.name);
}

【讨论】：

对您有帮助吗？
其实 hero 是未定义的。我真的需要 {{hero}} 才能让它工作吗？
从我假设的 ngFor 的 let 中......我这样说是因为我想传递一个带有关联属性的整个对象 - 一个值对象......
可能是“让英雄中的英雄”中的错字？我觉得应该是“让英雄中的英雄”
不，我不是。我在 Ionic 移动应用程序中使用事件处理程序。循环中的内容正在呈现。我有一个调用编辑处理程序的向左滑动菜单（ion-item-sliding plus ion-item，ion-item-options）。将调试器放置在事件处理程序中。我总是不确定。已尝试将 ($event, hero) 作为参数以及 (hero)。总是不确定...