Question

我正在尝试在component.html中显示我在component.ts文件中的变量。其他变量正在显示，但由于一些奇怪的原因，数字变量未显示。我遇到的问题比这更大，但这将有助于解决更大的问题。这是指向其他问题的链接，以防您想要查看它：Displaying list one by one in 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

在你的组件中

       try
        {
            Console.WriteLine("Connecting to MySQL...");
            conn.Open();

            string sql = @"select lr.ec_job_link, cl.change_list ,lr.submitted_by, lr.submission_time,lr.lookahead_run_status
                                from lookahead_run as lr, lookahead_run_change_list as lrcl, change_list_details as cld,change_lists as cl
                                where lr.lookahead_run_status is null
                                and lr.submission_time is not null
                                and lrcl.lookahead_run_id = lr.lookahead_run_id
                                and cl.change_list_id = lrcl.change_list_id
                                and cl.change_list_id not in (select clcl.change_list_id from component_labels_change_lists as clcl)
                                and cld.change_list_id = lrcl.change_list_id
                                group by lr.lookahead_run_id, cl.change_list
                                order by lr.submission_time desc
                                limit 1000
                                ";

            MySqlCommand cmd = new MySqlCommand(sql, conn);
            MySqlDataReader rdr = cmd.ExecuteReader();
            var ECJoblink_previous ="";
            var gerritList = new List<String>();

            while (rdr.Read())
            {
                //Console.WriteLine(rdr[0] + " -- " + rdr[1]);
                //Console.ReadLine();
                var lookaheadRunInfo = new LookaheadRunInfo();
                lookaheadRunInfo.ECJobLink = rdr.GetString(0);
                if (ECJoblink_previous == lookaheadRunInfo.ECJobLink)
                {
                    //Keep appending the list of gerrits until we get a new lookaheadRunInfo.ECJobLink
                    lookaheadRunInfo.gerrits.Add(rdr.GetString(1));
                }
                else
                {
                    lookaheadRunInfo.gerrits = new List<string> { rdr.GetString(1) };
                }
                ECJoblink_previous = lookaheadRunInfo.ECJobLink;
                lookaheadRunInfo.UserSubmitted = rdr.GetString(2);
                lookaheadRunInfo.SubmittedTime = rdr.GetString(3).ToString();
                lookaheadRunInfo.RunStatus = "null";
                lookaheadRunInfo.ElapsedTime = (DateTime.UtcNow-rdr.GetDateTime(3)).ToString();
                lookaheadRunsInfo.Add(lookaheadRunInfo);                  
            }

            rdr.Close();
        }
        catch
        {
            throw;
        }

您的HTML包含此行

isLoading = true;

因此，<div class="card" *ngIf="!isLoading">和您的模板不会在DOM中呈现

此外，你有以下功能

!isLoading== false

注意：当您的订阅完成（）时，只会执行getQuestions() { this.dataService.getQuestions().subscribe( data => this.questions = data, error => console.log(error), () => this.isLoading = false ); }。您似乎没有取消订阅或订阅永远不会结束。所以这一行不会执行，你的DOM也不会被渲染

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

1 个答案: