时间戳

首页 > 解决方案 > 如何以角度将对象从ngFor传递给组件？

javascript - 如何以角度将对象从ngFor传递给组件？

问题描述

我是 Angular 的新手，我真的不明白我面临的问题是什么。
我正在尝试将对象从 *ngFor 传递给他的组件。
这是一个简单的 *ngFor 迭代数组

 <div class="card text-center" *ngFor="let alarm of alarms">
    <div class="card-header">
      ....
    </div>
    <div class="card-body p-2">
      <span class="text-secondary font-weight-bold">
            Floor
            <span>{{ alarm.sensor.sentinel.monitorings_sentinels[0].monitoring.patient.location[0].floor }}</span>
      </span>         
    </div>
 </div>

我想避免这种长插值，所以我想将电流传递let alarm给组件并将三个属性分配给一个对象并显示它，

customMethod(alarm) {
  this.location.floor = alarm.sensor.sentinel.monitorings_sentinels[0].monitoring.patient.location[0].floor;
  this.location.room = alarm.sensor.sentinel.monitorings_sentinels[0].monitoring.patient.location[0].room;
  this.location.bed = alarm.sensor.sentinel.monitorings_sentinels[0].monitoring.patient.location[0].bed;
}

这是我的期望：

<div class="card text-center" *ngFor="let alarm of alarms">
    <div class="card-header">
      ....
    </div>
    <div class="card-body p-2">
      <span class="text-secondary font-weight-bold">
            Floor
            <span>{{ location.floor }}</span>
      </span>         
    </div>
 </div>

并location为每个对象显示带有字符串插值的属性对象alarm。
做这个的最好方式是什么？

标签： javascriptangulartypescript

解决方案

您希望避免在模板 ( .html) 文件中包含任何逻辑，因此我建议您在组件文件中执行逻辑。

您可以在将alarms数组发送到模板之前对其进行准备。

@Component(..)
export class SomeComponent {
  private _alarms;

  @Input()
  set alarms(alarms) {
    this._alarms = alarms.map(alarm => customMethod(alarm))
  }

  get alarms() {
    return this._alarms
  }
}

function customMethod(alarm) {
  return {
    ...alarm, // <<< remove this if you just want locations
    locations: {
      floor: alarm.sensor.sentinel.monitorings_sentinels[0].monitoring.patient.location[0].floor,
      room: ....,
      bed: ...
  }
}

然后在你的模板中

<div class="card text-center" *ngFor="let alarm of alarms">
    <div class="card-header">
      ....
    </div>
    <div class="card-body p-2">
      <span class="text-secondary font-weight-bold">
            Floor
            <span>{{ alarm.location.floor }}</span>
      </span>         
    </div>
 </div>

推荐阅读