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

Question

当我尝试通过输入将数组传递给组件时遇到问题。 我在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)

  }

}

这是控制台日志

Answer 1

要将数据传递给子组件，应将属性放在方括号[]中，并将属性括在引号中。 在您的示例中，应按以下方式传递输入数据：

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

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