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

【问题标题】：How to pass an object from ngFor to the component in angular?如何以角度将对象从ngFor传递给组件？
【发布时间】：2021-07-07 18:01:25
【问题描述】：

我是 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。
最好的方法是什么？

【问题讨论】：

您遇到了什么问题？目前还不太清楚问题是什么
对象警报具有嵌套对象，因此为了避免在 html 中编写冗长的字符串插值，我更喜欢将其一些属性分配给对象并显示该对象。但要这样做，我需要将警报对象从 html 传递到组件。这将是我应该在 html 中编写的插值：alarm.sensor.sentinel.monitorings_sentinels.monitoring.patient.location.floor
@Abri 仍然不确定您要做什么，您需要添加更多代码。你看过组件输入和输出angular.io/guide/inputs-outputs 吗？
是的，但都是关于父子组件的，我需要来自模板和组件的“数据流”
@Abri 您是否通过单击卡片调用 customMethod(alarm) 以及您在哪里显示位置。楼层，位置。房间和位置。床在不同的组件中

标签： javascript angular typescript

【解决方案1】：

您希望避免在模板 (.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>

【讨论】：

我尝试了您的解决方案，它工作正常，但对象警报仍然具有嵌套的所有属性，直到位置对象是一种在耐心下截断嵌套对象的方法？
对不起，我不完全确定我理解这个问题。你能分享一下你想要alarm 的最终形状是什么
我喜欢你这样做的方式，但是自定义方法返回整个对象警报 + 位置 {}，有一种方法可以截断/删除 alarm.sensor.sentinel.monitorings_sentinels[0].monitoring.patient.location[0] 并让对象 alarm 带有只是一个属性location？因为我会将您的解决方案应用于警报中的其他对象
啊，我明白了，是的，更新了答案。您应该从自定义方法的返回中删除 ...alarm

【解决方案2】：

创建一个辅助方法来获取您想要显示的值，然后从模板中调用它。

你可以对对象做任何事情来获得你想要在这里显示的值，因为它只是一个函数：

createMyString(alarm) {
  return alarm.sensor.sentinel.monitorings_sentinels[0].monitoring.patient.location[0].floor;
}

然后在你的模板中

{{createMyString(alarm)}}

【讨论】：

我读到在插值中使用函数会减慢渲染该模板的过程，我还需要为要显示的三个属性创建三个不同的方法
您可以将返回内容的逻辑添加到您的函数中，并根据对象或索引做出决定（您可以在模板中获取索引变量 for 循环和将其传递给方法）