component.ts中的变量不出现在component.html angular2中

Question

我试图在我的component.ts文件中显示我的component.html上的变量。 其他变量正在显示，但由于一些奇怪的原因，数字变量未显示。 我遇到的问题比这更大，但这将有助于解决更大的问题。 这是另一个问题的链接，以防您想要查看它： 在angular2中逐个显示列表 。

这是.ts文件

import { Http } from '@angular/http';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { ToastComponent } from '../shared/toast/toast.component';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {

  questions = [];
  isLoading = true;
  currentQuestionNumber = 0;

  question = {};

  addQuestionForm: FormGroup;
  name = new FormControl('', Validators.required);
  a_Answer = new FormControl('', Validators.required);
  b_Answer = new FormControl('', Validators.required);
  c_Answer = new FormControl('', Validators.required);
  d_Answer = new FormControl('', Validators.required);
  a_Freq = new FormControl('', Validators.required);
  b_Freq = new FormControl('', Validators.required);
  c_Freq = new FormControl('', Validators.required);
  d_Freq = new FormControl('', Validators.required);

  constructor(private http: Http,
              private dataService: DataService,
              public toast: ToastComponent,
              private formBuilder: FormBuilder) { this.currentQuestionNumber = 0}

  ngOnInit() {
    this.getQuestions();

    this.currentQuestionNumber = 0;

    this.addQuestionForm = this.formBuilder.group({
      name: this.name,
      a_Answer: this.a_Answer,
      b_Answer: this.b_Answer,
      c_Answer: this.c_Answer,
      d_Answer: this.d_Answer,
      a_Freq: this.a_Freq,
      b_Freq: this.b_Freq,
      c_Freq: this.c_Freq,
      d_Freq: this.d_Freq
    });
  }

  getQuestions() {
    this.dataService.getQuestions().subscribe(
      data => this.questions = data,
      error => console.log(error),
      () => this.isLoading = false
    );
  }

  incrementFreqA(question) {

    question.a_Freq = question. a_Freq + 1;
    this.dataService.editQuestion(question).subscribe(
      res => {
        this.question = question;
      },
      error => console.log(error)
    );
  }

  incrementFreqB(question) {

    question.b_Freq = question. b_Freq + 1;
    this.dataService.editQuestion(question).subscribe(
      res => {
        this.question = question;
      },
      error => console.log(error)
    );
  }

  incrementFreqC(question) {

    question.c_Freq = question. c_Freq + 1;
    this.dataService.editQuestion(question).subscribe(
      res => {
        this.question = question;
      },
      error => console.log(error)
    );
  }

  incrementFreqD(question) {

    question.d_Freq = question. d_Freq + 1;
    this.dataService.editQuestion(question).subscribe(
      res => {
        this.question = question;
      },
      error => console.log(error)
    );
  }


}

这是.html文件。 所有问题都显示在Hello World之后，但之后没有数字0。

<div class="card" *ngIf="isLoading">
  <h4 class="card-header">Loading...</h4>
  <div class="card-block text-xs-center">
    <i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
  </div>
</div>

<div class="card" *ngIf="!isLoading">

  <div class="card-block text-md-center" *ngFor="let question of questions; let i=index">
    <form>
      <fieldset class="form-group">
        <h1>{{question.name}}</h1>

        <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-secondary" (click)="incrementFreqA(question)">{{question.a_Answer}}</button>
          <button type="button" class="btn btn-secondary" (click)="incrementFreqB(question)">{{question.b_Answer}}</button>
          <button type="button" class="btn btn-secondary" (click)="incrementFreqC(question)">{{question.c_Answer}}</button>
          <button type="button" class="btn btn-secondary" (click)="incrementFreqD(question)">{{question.d_Answer}}</button>
          <p>Hello World</p>
          <p>{{currentQuestionNumber}}</p>
        </div>

      </fieldset>
    </form>
  </div>
</div>

任何指针的帮助将不胜感激。

Answer 1

在您的组件中

isLoading = true;

你的HTML包含这一行

<div class="card" *ngIf="!isLoading">

所以， !isLoading== false ，你的模板不会在DOM中呈现

此外，你有以下功能

getQuestions() {
    this.dataService.getQuestions().subscribe(
      data => this.questions = data,
      error => console.log(error),
      () => this.isLoading = false
    );
  }

注意：当您的订阅完成（）时，只会执行this.isLoading=false 。 您似乎没有取消订阅或订阅永远不会结束。 所以这一行不会执行，你的DOM也不会被渲染