ERROR TypeError: Cannot read property ANGULAR6

Question

我在构建表单时遇到错误（提交日期快到了，可能是因为太恐慌了）。`

我在我的 google DevConsole 上收到此错误，但页面加载完全符合我的要求。

`ERROR TypeError: Cannot read property 'answers' of undefined
    at Object.eval [as updateDirectives] (QuestionsComponent.html:20)

我的html

              <div class="custom-control custom-radio" *ngFor="let question of question.answers">
                  <input  type="radio" class="custom-control-input" id="answers" name="groupOfRadios">
                  <label  class="custom-control-label" for="answers">{{question.body}}</label>
              </div>

我的TS

export class QuestionsComponent implements OnInit {

  //define variables to use
    private question : {
      id: number;
      body: string;
      answers: {
        id: number;
        body: string;
      }[]
    }

  constructor(private router: Router, private http: HttpClient, private quest: QuestionService) { }

  ngOnInit() {

    this.quest.getQuestion().subscribe(
      data=> {
        this.question = {
            id: data.question.id,
            body: data.question.body,
            answers: data.question.answers
            }
          }
    )
    }
  }

我想通过服务器通过发送 json 数据来加载问题。

answers 是属于问题的 id 和 body 的数组。

抱歉，感谢您的耐心等待。

祝福！

Answer 1

在标记中，首先检查您的 question 是否收到数据，然后对其进行迭代。使用安全的属性访问器 - question?.

<div class="custom-control custom-radio" *ngFor="let question of question?.answers">
    <input  type="radio" class="custom-control-input" id="answers" name="groupOfRadios">
    <label  class="custom-control-label" for="answers">{{question.body}}</label>
</div>

或者用空答案数组初始化你的变量

private question: {
    id: number;
    body: string;
    answers: {
        id: number;
        body: string;
    }[]
} = {
   id: 0,
   body: null,
   answers: []
}

Answer 2

您可以使用 *ngIf="question"，这样 HTML 部分只有在 question 对象中有数据后才会呈现，直到 HTTP 调用完成。

<div *ngIf="question" class="custom-control custom-radio" *ngFor="let question of question.answers">
  <input  type="radio" class="custom-control-input" id="answers" name="groupOfRadios">
  <label  class="custom-control-label" for="answers">{{question.body}}</label>
</div>

ERROR TypeError: Cannot read property ANGULAR6

ERROR TypeError: Cannot read property ANGULAR6

html

ngfor

angular