Question

我正在尝试根据json响应构建测试问卷。在控制台中我得到错误'无法读取未定义'的属性'标题'，因为它似乎想要在得到响应之前进行字符串插值。

到目前为止，我的代码看起来像这样：

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

你可以做的是，你班上也有一个布尔值。默认情况下，将布尔值设置为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

您可以在HTML中添加* ngIf：

<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的属性

2 个答案: