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

Question

I am trying to display a variable on my component.html that I have in my component.ts file. Other variables are displaying but for some weird reason the number variable is not displaying. The issues I am having is bigger than this but this will help solve the larger problem. This is a link to the other question in case you would want to take a look at it: Displaying list one by one in angular2 .

Here is the .ts file

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)
    );
  }


}

This is the .html file. All questions are displayed with the Hello World after it but with no number 0 after it.

<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>

Any help of pointers would be appreciated.

Answer 1

In your component you are having

isLoading = true;

And your HTML contains this line

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

So, !isLoading== false and your template is not rendered in the DOM

Also, you have below function

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

Note : When your subscription completes() then only this.isLoading=false will execute. It seems that you are not unsubscribing or your subscription never ends. So this line will not execute and your DOM is not rendered