角度5で* ngForを使用せずに親コンポーネントから子コンポーネントにデータを送信する方法

ハリッシュ

私は実際に* ngForを使用してセレクターを繰り返し、子コンポーネントにもデータを送信しています。以下のコードをご覧ください。

<app-piegraph *ngFor="let studentData of studentData" [studentData]="studentData"></app-piegraph>

親コンポーネント:

studentData = {first: "harish",second: "santhu"}

子コンポーネント:

export class PiegraphComponent implements OnInit{
  @Input('studentData') testObj;
constructor(){
console.log(this.testObj); //Getting undefined error message here
}
}

studentDataにオブジェクトが1つしかないため、データを繰り返したくありません。* ngForを使用せずにstudentDataオブジェクトを子コンポーネントに送信したいだけです。

これは可能ですか?

AJT82

あなたstudentDataは配列であり、実行できるオブジェクトが1つしかないことは確かです。

<app-piegraph [studentData]="studentData[0]"></app-piegraph>

ここでは、配列でundefinedエラーが発生しないように、親コンポーネントで配列を初期化することを覚えておく必要があります。

また、@Inputコンストラクターで子をコンソールログに記録しようとしていますが、その時点では@Input値はまだ使用できません。これは、コンソールログをOnInit次の場所に移動することで解決できます

export class PiegraphComponent implements OnInit{
  @Input('studentData') testObj;

  constructor(){ }

  ngOnInit() { 
    console.log(this.testObj);
  }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

角度でngを使用せずに、親コンポーネントから子に入力値を渡す方法は?

分類Dev

Vue.jsで親から子のコンポーネントにデータを送信する方法

分類Dev

AngularJsで親コンポーネントから子コンポーネントにデータを送信する方法

分類Dev

reactjsで子コンポーネントから親コンポーネントにデータを送信する方法

分類Dev

角度8の@inputデコレータを使用して、親コンポーネントから子コンポーネントにデータを渡します

分類Dev

Vueで子から親コンポーネントにデータを渡す

分類Dev

AngularJS1.xでコンポーネントから親にデータを送信する方法

分類Dev

親コンポーネントから子コンポーネントにスタイルを送信するにはどうすればよいですか?

分類Dev

Angularで親コンポーネントから子コンポーネントにデータを取得するにはどうすればよいですか?

分類Dev

親コンポーネントの保存ボタンを使用してデータを送信する前に、親コンポーネントと子コンポーネントの両方からのユーザー入力を検証するにはどうすればよいですか?

分類Dev

HTMLから子コンポーネントにngforインデックスを送信できません

分類Dev

子コンポーネントから親コンポーネントにイベントを渡すAngular 5

分類Dev

Angular8でFormArrayバリデーターを子コンポーネントから親コンポーネントに伝播する

分類Dev

Angular 4で親コンポーネントから子コンポーネントにデータを渡す方法

分類Dev

React.jsで子コンポーネントから親コンポーネントにデータを渡す方法

分類Dev

Angular4で子コンポーネントから親コンポーネントにデータを渡す方法

分類Dev

子コンポーネントから$ emitを使用して親コンポーネントにデータを送信すると、Vueでは機能しません

分類Dev

親から子コンポーネントにデータを渡すことができません

分類Dev

途中で各コンポーネントに出力せずに、Angularでn個の子を持つ子から親にデータを渡す

分類Dev

Angular:親子コンポーネントで* ngForを使用する方法

分類Dev

ReactJSで子コンポーネントからその親にデータを渡す方法は?

分類Dev

React.JSで子から親コンポーネントにデータを渡す方法は?

分類Dev

変数の値を子コンポーネントから親コンポーネントに送信するにはどうすればよいですか?

分類Dev

親コンポーネントからネストされた子コンポーネントにAngularでデータを渡す

分類Dev

Reactで親コンテナから子コンポーネントにAPIデータを渡す

分類Dev

反応ネイティブで子コンポーネントから親コンポーネントにデータを渡しますか?

分類Dev

Angularで親コンポーネントから子コンポーネントにデータを渡すときのHTMLエラー

分類Dev

Angular @ ViewChildで子コンポーネントから親コンポーネントにデータを渡す2つの引数が必要です

分類Dev

子コンポーネントから親コンポーネントに計算データを取得できますか?

Related 関連記事

  1. 1

    角度でngを使用せずに、親コンポーネントから子に入力値を渡す方法は?

  2. 2

    Vue.jsで親から子のコンポーネントにデータを送信する方法

  3. 3

    AngularJsで親コンポーネントから子コンポーネントにデータを送信する方法

  4. 4

    reactjsで子コンポーネントから親コンポーネントにデータを送信する方法

  5. 5

    角度8の@inputデコレータを使用して、親コンポーネントから子コンポーネントにデータを渡します

  6. 6

    Vueで子から親コンポーネントにデータを渡す

  7. 7

    AngularJS1.xでコンポーネントから親にデータを送信する方法

  8. 8

    親コンポーネントから子コンポーネントにスタイルを送信するにはどうすればよいですか?

  9. 9

    Angularで親コンポーネントから子コンポーネントにデータを取得するにはどうすればよいですか?

  10. 10

    親コンポーネントの保存ボタンを使用してデータを送信する前に、親コンポーネントと子コンポーネントの両方からのユーザー入力を検証するにはどうすればよいですか?

  11. 11

    HTMLから子コンポーネントにngforインデックスを送信できません

  12. 12

    子コンポーネントから親コンポーネントにイベントを渡すAngular 5

  13. 13

    Angular8でFormArrayバリデーターを子コンポーネントから親コンポーネントに伝播する

  14. 14

    Angular 4で親コンポーネントから子コンポーネントにデータを渡す方法

  15. 15

    React.jsで子コンポーネントから親コンポーネントにデータを渡す方法

  16. 16

    Angular4で子コンポーネントから親コンポーネントにデータを渡す方法

  17. 17

    子コンポーネントから$ emitを使用して親コンポーネントにデータを送信すると、Vueでは機能しません

  18. 18

    親から子コンポーネントにデータを渡すことができません

  19. 19

    途中で各コンポーネントに出力せずに、Angularでn個の子を持つ子から親にデータを渡す

  20. 20

    Angular:親子コンポーネントで* ngForを使用する方法

  21. 21

    ReactJSで子コンポーネントからその親にデータを渡す方法は?

  22. 22

    React.JSで子から親コンポーネントにデータを渡す方法は?

  23. 23

    変数の値を子コンポーネントから親コンポーネントに送信するにはどうすればよいですか?

  24. 24

    親コンポーネントからネストされた子コンポーネントにAngularでデータを渡す

  25. 25

    Reactで親コンテナから子コンポーネントにAPIデータを渡す

  26. 26

    反応ネイティブで子コンポーネントから親コンポーネントにデータを渡しますか?

  27. 27

    Angularで親コンポーネントから子コンポーネントにデータを渡すときのHTMLエラー

  28. 28

    Angular @ ViewChildで子コンポーネントから親コンポーネントにデータを渡す2つの引数が必要です

  29. 29

    子コンポーネントから親コンポーネントに計算データを取得できますか?

ホットタグ

アーカイブ