Ionic 2：当我将数组传递给组件时，我在 component.ts 上得到一个字符串

Posted 2023-02-23

【中文标题】Ionic 2：当我将数组传递给组件时，我在 component.ts 上得到一个字符串

【英文标题】：Ionic 2: when I pass array to component I get a string on component.ts

【发布时间】：2018-01-12 10:21:35

【问题描述】：

当我尝试通过输入将数组传递给组件时遇到问题。 我在 home.ts 上 console.log 数组，我得到的是一个对象，然后，当我将它传递给组件时，在 component.ts 上我得到它是一个字符串。

我不知道我做得好不好

在组件 ts 上我有这个：

@Component(
  selector: 'micomponente',
  templateUrl: 'micomponente.html'
)
export class MicomponenteComponent 
    @Input() pra:any=[];
  text: string;

  constructor() 
    console.log('Hello MicomponenteComponent Component');
    this.text = '';
  

   ngOnInit() 
    console.log(typeof(this.pra)) //this is the red arrow on the picture
    this.text = this.pra;
  

home.html

<ion-content padding>
 <micomponente pra="algo"></micomponente>
</ion-content>

home.ts

export class HomePage 
algo:any=[];

  constructor(public navCtrl: NavController) 
    this.algo.push(['1','fsa']);
    this.algo.push(['2','fsd']);
    console.log(this.algo)

  

这是控制台日志

【参考方案1】：

要将数据传递给子组件，属性应放在方括号 [] 中，属性应放在引号中。 在您的示例中，输入数据应该像这样传递：

<ion-content padding>
    <micomponente [pra]="algo"></micomponente>
</ion-content>

请参阅https://angular.io/guide/component-interaction，了解如何将数据传入和传出子组件。 双花括号用于插值，将属性显示为 html 中的字符串。有关插值的更多信息，请在此处阅读：https://angular.io/guide/template-syntax#interpolation----。