如何在角度5或6中绑定ngFor中的ngModel

时间:2018-05-10 07:13:19

标签: html css angular

我正在开发一个刽子手游戏,我有一些单词的数组。借助于那些单词,我使用* ng来制作输入文本现在应该如何绑定角度5中的文本输入

component.ts

import { Component } from '@angular/core';
import {
  Observable,
  Subject,
  ReplaySubject,
  from,
  of,
  range,
  timer,
  interval
} from 'rxjs';
import { map, filter, switchMap, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  i = 0;
  time;
  currentQuestion;
  currentQuestionChar = [];
  alpha = [];
  InflationVal;
  quesions = [
    {
      name: 'Gross'
    },
    {
      name: 'Adjusted'
    },
    {
      name: 'Admin'
    },
    {
      name: 'Income'
    },
    {
      name: 'Excise'
    },
    {
      name: 'Book'
    },
    {
      name: 'Other'
    },
  ];
  subject = new Subject();
  counter;
  countDownValue = 5;
  constructor() {
    this.nextQuestion();
    this.genCharArray('a', 'z');
    console.log(this.alpha);
  }

  genCharArray(charA, charZ) {
    let i , j;
    this.alpha = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
        this.alpha.push(String.fromCharCode(i));
    }
}

  timerFunction() {
    this.time = timer(1, 1000)
      .pipe(takeUntil(this.subject))
      .subscribe(ticks => {
        if (ticks <= this.countDownValue) {
          this.counter = this.countDownValue - ticks;
          console.log(this.counter);
        } else {
          this.subject.next();
          this.nextQuestion();
        }
      });
  }
  nextQuestion() {
    if (this.quesions[this.i] != null) {
      this.currentQuestion = this.quesions[this.i].name;
      this.currentQuestionChar = this.currentQuestion.split('');
      console.log(this.currentQuestionChar);
      this.timerFunction();
    }
    this.i++;
  }
  check(currentChar) {
    console.log(currentChar);
  }
}

Component.html

enter image description here

现在当用户按下阿尔法键时,它将调用检查功能 在此函数中,如果按下的按钮值存在于答案内,我想将值分配给文本输入 请帮助谢谢

1 个答案:

答案 0 :(得分:0)

一个简单的选项可能是实现guessedLetters:Array并使用* ngIf有条件地显示答案字段中的字母,具体取决于它们是否包含在guessedLetters中。