親から子へのプロパティのバインドに問題があります
これは私の家です.ts (親)
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NewComponent } from '../../components/new/new'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
oneObject = {content: "Card content"}
constructor(public navCtrl: NavController) {
}
}
そして、home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<new new-name="some name" [new-obj]="oneObject"></new>
<new new-name="some name 2" ></new>
<new new-name="some name 4" ></new>
</ion-content>
これは私のnew.ts (子コンポーネント) です
この問題は、現在のコンポーネントで既知のプロパティとして認識されない new-obj が原因です。それはどうですか?
import { コンポーネント, 入力 } from '@angular/core';
/**
- NewComponent コンポーネント用に生成されたクラス。*
- Angular の詳細については、 https://angular.io/api/core/Componentを参照してください。
コンポーネント。*/ @Component({ セレクター: 'new', templateUrl: 'new.html' }) export class NewComponent {
@Input('new-name') name:string; @Input('new-obj') myObj:any;
テキスト: 文字列;
constructor() { console.log('Hello NewComponent コンポーネント'); this.text = 'ハローワールド'; }
}
new.html
<ion-card>
<ion-header>
</ion-header>
<ion-card-content>
{{ name }}
{{ **myObj?.content }**}
</ion-card-content>
</ion-card>
コンソールからのエラー メッセージ: