在 Angular 中插入返回 json 的属性的字符串

Question

我正在尝试根据 json 回复构建测试问卷。在控制台中，我收到错误 'Cannot read 属性 'Title' of undefined' 因为它似乎想在我得到响应之前进行字符串插值。

到目前为止，我的代码如下所示：

component.ts:

export class QuestionComponent implements OnInit {
  jsonQuestionnaire: Questionnaire;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    console.log(this.jsonQuestionnaire);
    // Make the HTTP request:
    this.http.get('/assets/equestion.json').subscribe(data =>  {
    //   // Read the result field from the JSON response.
      this.jsonQuestionnaire = data as Questionnaire;
      console.log(this.jsonQuestionnaire);
      console.log(this.jsonQuestionnaire.Title);
      }
    );
  }
}

questionnaire.model.ts:

export interface Questionnaire {
  GuestName: string;
  QuestionnaireClose: boolean;
  QuestionnaireCompleted: boolean;
  Sections: Section[];
  Title: string;
  WelcomeText: string;
}

export interface Section {
  SectionName: string;
  SectionId: number;
  Questions: Question[];
}

export interface Question {
  AnswerReqired: boolean;
  Answers: Answer[];
  QuestionID: number;
  QuestionName: string;
  QuestionType: string;
}

export interface Answer {
  AnswerID: number;
  AnswerName: string;
}

和我的 html:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>{{jsonQuestionnaire.Title}}</h1>
      <p>{{jsonQuestionnaire.WelcomeText}}</p>
      <div *ngFor="let section of jsonQuestionnaire.Sections; let j = index">
        <br>
        <p>{{section[j].SectionName}}</p>
      </div>

    </div>
  </div>
</div>

任何人都可以指出我要解决的正确方向吗？如果我记录我得到的所有属性作为响应，我会毫无问题地这样做。那么如何延迟字符串插值呢？

问候，Aghi

Answer 1

你可以做的是，在你的 class 中也有一个布尔值。默认情况下，将布尔值设置为 false，当您收到响应时，将布尔值设置为 true。像这样：

export class QuestionComponent implements OnInit {
  jsonQuestionnaire: Questionnaire;
  isData: Boolean;

  constructor(private http: HttpClient) { 
     this.isData = false;
  }

  ngOnInit() {
    console.log(this.jsonQuestionnaire);
    // Make the HTTP request:
    this.http.get('/assets/equestion.json').subscribe(data =>  {
    //   // Read the result field from the JSON response.
      this.jsonQuestionnaire = data as Questionnaire;
      this.isData = true;
      console.log(this.jsonQuestionnaire);
      console.log(this.jsonQuestionnaire.Title);
      }
    );
  }
}

现在在您的模板中，将 *ngIf 放在所需的输出上。像这样：

<div class="container">
  <div class="row">
    <div class="col-xs-12" *ngIf="isData">
      <h1>{{jsonQuestionnaire.Title}}</h1>
      <p>{{jsonQuestionnaire.WelcomeText}}</p>
      <div *ngFor="let section of jsonQuestionnaire.Sections; let j = index">
        <br>
        <p>{{section[j].SectionName}}</p>
      </div>

    </div>
  </div>
</div>

就是这样。只有当您的 JSON 的数据可用时，您的 div 才会显示。

因此不会显示任何错误。

试试看然后告诉我。

Answer 2

您可以将 *ngIf 添加到您的 HTML:

<div class="container">
  <div class="row" *ngIf="jsonQuestionnaire">
    <div class="col-xs-12">
      <h1>{{jsonQuestionnaire.Title}}</h1>
      <p>{{jsonQuestionnaire.WelcomeText}}</p>
      <div *ngFor="let section of jsonQuestionnaire.Sections; let j = index">
        <br>
        <p>{{section[j].SectionName}}</p>
      </div>
    </div>
  </div>
</div>

或者给你加一个安全导航运算符 *ngFor:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>{{jsonQuestionnaire.Title}}</h1>
      <p>{{jsonQuestionnaire.WelcomeText}}</p>
      <div *ngFor="let section of jsonQuestionnaire?.Sections; let j = index">
        <br>
        <p>{{section[j].SectionName}}</p>
      </div>
    </div>
  </div>
</div>

在 Angular 中插入返回 json 的属性的字符串

String interpolating a property of returned json in Angular

json

http

string-interpolation

angular

在 Angular 中插入返回 json 的 属性 的字符串

String interpolating a property of returned json in Angular

json

http

string-interpolation

angular

在 Angular 中插入返回 json 的属性的字符串