variable in component.ts not appearing in 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.

Aravind · Accepted Answer · 2017-03-25 01:19:58Z

4

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

answered Mar 25, 2017 at 1:19

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ankit Over a year ago

That makes sense. However, how come the other variables such as questions and isLoading are available to the .html but not the currentQuestionNumber? why is it the only variable affected by the DOM not rendering?

ankit Over a year ago

Also, you are a life saver! I just put the this.isLoading = false outside the subscribe() and it displays the number!

ankit Over a year ago

I did but it doesn't show. It says that its not displayed because I dont have 15 reputation

Aravind Over a year ago

5 more needed hope the best

Collectives™ on Stack Overflow

variable in component.ts not appearing in component.html angular2

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related