Angular2：コンポーネントのビューに予期しないディレクティブ値 'undefined'があります

Question

私のAngular2アプリケーションでは、エディタが作成できる質問のリストを表示する必要があります。各質問の下には、0〜nの回答（オプション - 「はい」、「いいえ」、「5」など）があります。だから、AnswerComponentをQuestionComponentからロードする必要があります。

ただし、それぞれの回答には0-1の質問があります（フォローアップの質問）。つまり、AnswerComponentからQuestionComponentを読み込む必要があります。ここで

はplunkerです：http://plnkr.co/edit/1itBVtDu8TD8Etxo4JZh

QuestionComponent（減少）：

@Component({ 
    selector: 'copyright-question', 
    template: ` 
       <div class="col-md-8"> 
        <strong>{{ question?.content }}</strong> 
        <div class="row-actions"> 
         <span *ngIf="!question?.isAnswer" class="addAnswer"><button (click)="onAddAnswer()">Add Answer</button></span> 
        </div> 
       </div>, 

       <li *ngFor="let answer of question.answers"> 
        <copyright-answer [answer]="answer"></copyright-answer> 
       </li> 
    `, 
    directives: [AnswerComponent] 
}) 

AnswerComponent（減少）：

@Component({ 
    selector: 'copyright-answer', 
    template: ` 
      <ul class="col-md-12"> 
       <li><strong>{{ answer.answerTxt }}</strong></li> 
       <li> 
        <div class="row-actions"> 
         <span> 
          <span><button (click)="onQuestionSave()">Add follow-up question</button></span> 
         </span> 
        </div> 
       </li> 

       <!-- Follow Up Question --> 
       <li> 
        <copyright-question [question]="copyrightQuestion"></copyright-question> 
       </li> 
      </ul> 
    `, 
    directives: [QuestionComponent] 
}) 

3日以上のためにこれを調査した結果、私がいることを知っていますこれは循環依存性です。とにかく、私はこれを解決する方法を知らない。私は質問と回答の任意のシーケンス長を提供する必要があります。私が参照前進しようとしたが、私はまだ、次のエラーメッセージがあります。

例外：「未定義」予期しないディレクティブ値コンポーネントの表示上のFYI「AnswerComponent」

を：アプリケーションがバックエンドでありますイオンアプリ。ユーザーが質問に答えなければならない場合、彼が選んだものに応じて、フォローアップの質問や結果（技術的には質問）があります。

この質問が重複している場合は、私にこの質問に対する回答を表示してください。しかし、私はそのような入れ子になっているコンポーネントを扱っている解決策を見つけることができませんでした。

ありがとうございました!!!

Answer 1

/** 
* Created by Brudus on 11/06/16. 
*/ 
import {Component, OnInit, Input, forwardRef} from "@angular/core"; 
import {Question} from "./question"; 
import {Answer} from "./answer"; 
import {QuestionComponent} from "./question.component"; 

@Component({ 
    selector: 'copyright-answer', 
    template: ` 
      <ul *ngIf="answer" class="col-md-12"> 
       <li><strong>{{ answer.answerTxt }}</strong></li> 
       <li> 
        <div class="row-actions"> 
         <span> 
          <span><button (click)="onQuestionSave()">Add follow-up question</button></span> 
         </span> 
        </div> 
       </li> 

       <!-- Follow Up Question --> 
       <li *ngIf="copyrightQuestion"> 
        <copyright-question [question]="copyrightQuestion"></copyright-question> 
       </li> 
      </ul> 
    `, 
    directives: [forwardRef(() => QuestionComponent)] 
}) 

export class AnswerComponent implements OnInit { 
    @Input() answer: Answer; 

    copyrightQuestion: Question = null; 

    constructor() {} 

    ngOnInit() { 

    } 

    onQuestionSave() { 
     //content: string, isAnswer: boolean, answers?: Answer[], 
     //  isRoot?: boolean, parentQuestion?: string 

     const question: Question = new Question('Follow-up question', false, null, 
     false, null); 
     this.copyrightQuestion = question; 
    } 
} 

Answer 2

お試しくださいElvisオペレータ?.内挿です。場合answerに

{{ answer?.answerTxt }} 

は、answerTxtメンバにアクセスしないであろう（未定義、NULLなど）falsyあります。

answerは、回答が得られるまでnullになります。