如何在 Ionic 3 中将对象数组从页面传递到组件？答案

【问题标题】：How to pass array of the object from page to component in Ionic 3?如何在 Ionic 3 中将对象数组从页面传递到组件？
【发布时间】：2018-03-17 15:29:36
【问题描述】：

我正在开发一个应用程序，使用 Ionic 3 和 angular 4。而且我有以下问题：如何将对象数组从页面传递给组件？当我将指令中的对象通知给组件时，它会转换为包含以下信息的字符串： [Object object], [Object object], [Object object] ...

Page.html（页面）代码：

<ion-card *ngFor="let telemetry of listTelemetry">
    <telemetria-chart medicao="{{telemetry.medicoes}}"></telemetria-chart>
</ion-card>

'telemetry.medicoes' 的原始值：

TelemetriaChart.ts（组件）代码：

@Component({
  selector: 'telemetria-chart',
  templateUrl: 'telemetria-chart.html'
})
export class TelemetriaChartComponent {

  @ViewChild('myChart') canvas: ElementRef;

  @Input() funcionalidadeId: any;
  @Input() medicao: any [];

  text: string;

  constructor() {
    setTimeout(() => {
      console.log('this.medicao', this.medicao);
      //...do something with this.medicao     
    }, 1000);
  }
}

console.log(this.medicao) 的结果：

我需要从“this.medicao”获取信息。

【问题讨论】：

我不明白你想从 medicao 数组或所有 medicao 数组中设置单个对象。以及什么数据列表遥测。在回答这个问题之前，请先解决这些问题：[medicao]="telemetry.medicoes"。您需要使用 [ ]。并且不需要使用 {{ }}。因为我们不对其进行字符串化。阅读此处angular.io/guide/template-syntax
谢谢@RomaSkydan，我会更正一下。我表达了自己，对于对象列表的单个对象的疑问是如此之多。但这份清单是一个优先事项。
@RomaSkydan，您建议将 medicao = "{{telemetry.medicoes}}" 切换为 [medicao] = "telemetry.medicoes"，它奏效了！谢谢你。你想写下你的答案吗？
我们能解决您的问题吗？还是剩下什么？
是的，它解决了我的问题

标签： angular ionic-framework

【解决方案1】：

改变

medicao="{{telemetry.medicoes}}"

到

[medicao]="telemetry.medicoes"

有用的链接：

Angular Interpolation

您可以在此处阅读有关{{}} 的信息。我们需要在哪里使用以及插值对插入其中的数据有什么作用。

Component Interaction

您可以在那里阅读我们可以在 angular2 中使用的组件通信场景

【讨论】：