親コンポーネントの変数は、子コンポーネントでアクセスされません -- angular6 フィールド 関連 問題

Variable of parent component not access in child component












1
vote

問題

日本語

このロードされた変数は、私のRolesComponentでtrueまたはfalseであることを確認する必要があります。

しかし私はこのエラーを得ています:

<事前> <コード> ERROR TypeError: Cannot read property 'loaded' of undefined

これらは私が試したコードです

ユーザー

<事前> <コード> @Component({ selector: 'app-users', templateUrl: './users.component.html', styleUrls: ['./users.component.css'] }) export class UsersComponent implements OnInit { events = []; loaded:boolean = false; constructor(private _eventService: UserService) { } ngOnInit() { this._eventService.getEvents() .subscribe( res => { this.events = res; this.loaded = true; console.log(this.loaded); }, err => console.log(err) ); } }

users.component.html

<事前> <コード> <div class="card-body"> <h5 class="card-title">{{ event.name }}</h5> <p class="card-text">{{ event.description }}</p>

役割

<事前> <コード> import { Component, AfterViewInit, ViewChild } from '@angular/core'; import { UsersComponent } from '../events/users.component'; export class RolesComponent implements AfterViewInit { @ViewChild(UsersComponent) event; constructor() { } loaded: boolean; ngAfterViewInit() { console.log(this.event.loaded); this.loaded = this.event.loaded; } }

rols.component.html

<事前> <コード> <div class="wrapper" *ngIf="loaded">
英語

I need to check this loaded variable is true or false in my RolesComponent.

But I am getting this error:

ERROR TypeError: Cannot read property 'loaded' of undefined 

These are the codes I have tried

Users

@Component({     selector: 'app-users',     templateUrl: './users.component.html',     styleUrls: ['./users.component.css'] }) export class UsersComponent implements OnInit {      events = [];     loaded:boolean = false;      constructor(private _eventService: UserService) { }      ngOnInit() {         this._eventService.getEvents()             .subscribe(                 res => {                     this.events = res;                     this.loaded = true;                     console.log(this.loaded);                 },                 err => console.log(err)             );     } } 

users.component.html

<div class="card-body">               <h5 class="card-title">{{ event.name }}</h5>               <p class="card-text">{{ event.description }}</p> 

Roles

import { Component, AfterViewInit, ViewChild } from '@angular/core'; import { UsersComponent } from '../events/users.component';  export class RolesComponent implements AfterViewInit {    @ViewChild(UsersComponent) event;    constructor() { }   loaded: boolean;   ngAfterViewInit() {     console.log(this.event.loaded);     this.loaded = this.event.loaded;   }  } 

roles.component.html

<div class="wrapper" *ngIf="loaded"> 
</div
  
   
   

回答リスト

0
 
vote

@ViewChildは、親コンポーネント内の子コンポーネントを参照するために使用されます。

@ViewChildは、親コンポーネント内の子コンポーネントの参照を探します。

親HTMLでは、子コンポーネントに対して定義した子セレクタを使用していることを確認する必要があります。これを書く必要がありますので、@ViewChildオブジェクトをこのコンポーネントにマッピングするようにする必要があります。

だから親HTMLに子セレクタを追加しただけです。

HTMLで同じように書いた場合、シーケンスの問題が読み込まれている可能性があります。

 

@ViewChild is used to refer Child Component inside Parent Component.

@ViewChild will look for the reference of Child component inside Parent Component.

You have to make sure in Parent HTML, you have used Child selector you have defined for Child component. You have to write this so that if will map your @ViewChild object with this component.

So just make sure you have added child selector in parent HTML.

If you have written same in HTML, there might be loading sequence issue.

</div
 
 
   
   

関連する質問

0  剣道グリッド角6 6クラスConditinoallyを列に追加します  ( Kendo grid angular 6 add class conditinoally in column ) 
私はリンクの下にあります。 https://stackblitz.com/edit. /angular-pwq1rq-d4ymup?file=app/app.component.ts <事前> <コード> code16 条件にクラスを追加する必要があ...

0  角6のリファクタリング  ( Angular 6 refactoring ) 
私はちょうど私のAppular 6を更新しました、そして私の観察可能な輸入のすべてが 'rxjs / observable' の代わりに 'rxjs'からの{obsjabable}のインポートに変更する必要があります。 これを行うことができる速い方法はあります...

3  マット拡張パネル付きの角6マットナビゲーションリスト  ( Angular 6 mat nav list with mat expansion panel ) 
リスト項目としてMAT-of拡張パネルを持つMAT-NAV-LISTを作成しようとしています。 問題は、MAT-NAV-LISTが予想どおりに機能しません。整列は混乱しており、拡張パネルは正しく機能しません。私が思うように、これはMAT-NAV-Listsがリ...

0  APIは400悪いリクエストを返します  ( Api returns 400 bad request ) 
<事前> <コード> var response = await this.http.post(proxyURL, cipherPayLoad, { headers: new commonHttp.HttpHeaders(requestHeaders), ...

9  @Inputがオブジェクトを受信して​​いる場合は、NGonChangesが起動しない  ( Ngonchanges not firing if an input is receiving an object ) 
親コンポーネントテンプレート: <事前> <コード> <my-component [param]="whatever"></my-component> 親コンポーネントコード: <事前> <コード> whatever = { value1: 0, valu...

0  ルート保護サービスでサーバーの応答を取得できません  ( Cannot get server response in route protecting service ) 
angular 6を使用しています、そして、ノードの応答とトークンの有効期限に応じて、いくつかの経路を保護するためのサービスを作成しています。 だから、私の労働サービスでは、期限切れのトークンをチェックしますので、サーバーの応答もチェックする次の機能を追加...

1  Angular6の角度テンプレート上のBYTE64文字列からPDFを表示する方法  ( How to display pdf from a byte64 string on my angular template in angular6 ) 
私はPDFのビューと私のアンギュラアプリのダウンロードに取り組んでいます、ここで私はセクションでPDFをダウンロードしたいと思いますが、私は私の角度テンプレートにPDFを展示したいのですが、どのようにしていますか。これを達成する、親切に援助を要求し、事前にあり...

0  SetAttributeは角度内のNGModelでは動作しません  ( Setattribute wont work with ngmodel in angular ) 
HTML要素を作成しながらNGModelを自動割り当てようとしています これは私のコード、です <事前> <コード> productName.setAttribute('[(ngModel)]', `customProductName`); しかし私はこ...

2  同じエンドポイントに複数のHTTPリクエストを実行する、マージ、ソート応答  ( Performing multiple http requests to same endpoint merge and sort response ) 
私が達成しようとしているのは、APIを複数の要求にして、結果をマージしてソートし、これをthis.products $ OverveAltsに割り当てることです。これは、最終的な結果がついに単一のリストに変わるという点で、これはほとんどのコードを見るところです...

0  イオン3のアコーディオンでこのフォームを開く方法?  ( How to open this form with accordion in ionic 3 ) 
私たちは検索フォームを構築し、アコーディオンの中にそれを実装しようとしているので、それをクリックしてフォームを開くことができます。これがコード:です ts <事前> <コード> buildForm(): void { this.form = t...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有