0

親から子へのプロパティのバインドに問題があります

これは私の家です.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>

コンソールからのエラー メッセージ:

プロパティ 'new-obj' は **new** コンポーネントに存在しますが、home.html によって生成されるエラー メッセージ

4

1 に答える 1