component.htmlの変数がangular.h2に表示されていません。

Question

私はcomponent.htmlのcomponent.tsファイルにある変数を表示しようとしています。他の変数が表示されていますが、数値変数が表示されないという奇妙な理由があります。私が持っている問題はこれよりも大きいですが、これは大きな問題を解決するのに役立ちます。これは、あなたがそれを見てみたいと思う場合のための他の質問へのリンクです：Displaying list one by one in angular2。ここで

は.TSこれは.htmlのファイルである

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


} 

ファイルです。すべての質問は、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> 

ポインタの助けがあれば幸いです。あなたは

isLoading = true; 

を持っているあなたのコンポーネントで

Answer 1

そして、あなたのHTMLだからこのライン

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

が含まれ、!isLoading== falseとあなたのテンプレートがまたDOM

でレンダリングされていない、あなたが持っています以下の機能

注：サブスクリプションが完了すると、this.isLoading=falseだけが実行されます。あなたが購読を中止していないか、購読が終了しないようです。したがって、この行は実行されず、DOMはレンダリングされません。