我如何使用 angular 插值作为数组中的索引？

Question

我正在尝试使用 angular 9 制作考试类型真假模拟器，但是当我尝试更正每个问题时，我无法插入更正的索引。我有这个错误：

ERROR in Template parse errors:
       Parser Error: Unexpected token {, expected identifier, keyword, or string at column 13 in [correccion[{{iteracion}}] == true] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10 ("
             </p>
           </form>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span *ngIf="correccion[{{iteracion}}] "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10
       Parser Error: Missing expected : at column 23 in [correccion[{{iteracion}}] == true] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10 ("
             </p>
           </form>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span *ngIf="correccion[{{iteracion}}] "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10
       Parser Error: Unexpected token } at column 23 in [correccion[{{iteracion}}] == true] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10 ("
             </p>
           </form>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span *ngIf="correccion[{{iteracion}}] "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10
       Parser Error: Missing expected ] at column 24 in [correccion[{{iteracion}}] == true] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10 ("
             </p>
           </form>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span *ngIf="correccion[{{iteracion}}] "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10
       Parser Error: Unexpected token {, expected identifier, keyword, or string at column 13 in [correccion[{{iteracion}}] == true] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10 ("
           </form>
           <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
         </div>
       </div>
       "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10
       Parser Error: Missing expected : at column 23 in [correccion[{{iteracion}}] == true] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10 ("
           </form>
           <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
         </div>
       </div>
       "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10
       Parser Error: Unexpected token } at column 23 in [correccion[{{iteracion}}] == true] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10 ("
           </form>
           <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
         </div>
       </div>
       "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10
       Parser Error: Missing expected ] at column 24 in [correccion[{{iteracion}}] == true] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@33:10 ("
           </form>
           <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
         </div>
       </div>
       "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10
       Parser Error: Unexpected token {, expected identifier, keyword, or string at column 13 in [correccion[{{iteracion}}] == false] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10 ("
           </form>
           <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
         </div>
       </div>
       "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10
       Parser Error: Missing expected : at column 23 in [correccion[{{iteracion}}] == false] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10 ("
           </form>
           <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
         </div>
       </div>
       "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10
       Parser Error: Unexpected token } at column 23 in [correccion[{{iteracion}}] == false] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10 ("
           </form>
           <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
         </div>
       </div>
       "): /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10
       Parser Error: Missing expected ] at column 24 in [correccion[{{iteracion}}] == false] in /tmp/build_7e740f28deaf7d36c5b5df82ff65204c/src/app/components/examen/examen.component.html@34:10 ("
           </form>
           <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
           <span [ERROR ->]*ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
         </div>
       </div>

问题是关于对校正数组的索引进行插值的方式这是我的 ts 代码：

    import { Component, OnInit } from '@angular/core';
import { PreguntaService } from '../../services/pregunta.service';
import {NgForm} from '@angular/forms';


@Component({
  selector: 'app-examen',
  templateUrl: './examen.component.html',
  styleUrls: ['./examen.component.css'],
  providers: [PreguntaService]
})
export class ExamenComponent implements OnInit {

  public numeroPreguntas: any;
  public preguntas: any;
  public status: boolean;
  public timeLeft: number;
  public interval;
  public subscribeTimer: any;
  public timerStatus: boolean;
  public correccion: any;
  public iteracion: number;
  public respuesta: boolean;

  constructor(private _preguntaService: PreguntaService) {
    this.numeroPreguntas = 10;
    this.status = false;
    this.timeLeft = this.numeroPreguntas * 40;
    this.correccion = new Array;
  }

  ngOnInit(): void {
    this.status = false;
    console.log(this.preguntas);

  }

  generateExam() {
    this.preguntas = new Array;
    for (let i = 0; i < this.numeroPreguntas; i++) {
    this._preguntaService.getRandomPregunta().subscribe(response=>{
        this.preguntas.push(response.pregunta);
      },
      error=>{
        console.log(<any>error);

      }
    );

    }

    console.log(this.preguntas);

    this.status = true;
  }
  changeNumber($event) {
    this.numeroPreguntas = $event;
    this.preguntas = new Array(this.numeroPreguntas);
    this.timeLeft = this.numeroPreguntas * 40;
  }

  changeRadio($event){
    this.respuesta = $event;
  }
  onSubmit(responseForm: NgForm) {
      this.respuesta=responseForm.controls['respuesta'].value;
      this.iteracion = responseForm.controls['iteracion2'].value;


    console.log('hola');
    console.log(this.iteracion);
    console.log(this.respuesta);



    if (this.preguntas[this.iteracion].response == this.respuesta ) {
      this.correccion = true;
    }else{
      this.correccion[this.iteracion] = false;
    }
  }
  startTimer() {
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.timerStatus = false;
      }
    },1000)
  }

  pauseTimer() {
      clearInterval(this.interval);
    }
  }

还有我的模板：

<div class="">
  <label>Introduce el numero de preguntas</label>
  <input type="number" [ngModel]="numeroPreguntas" (ngModelChange)="changeNumber($event)" min="1" max="40">
</div>

<div class="">
  <button type="button" (click)="generateExam()">Generar examen</button>
</div>
<div class="sticky-top container bg-warning d-flex flex-row justify-content-around">
  <div class="botones">
    <button (click)='startTimer()' class="btn">Start Timer</button>
    <button (click)='pauseTimer()' class="btn">Pause</button>
  </div>
  <div class="timer">
    <p>{{timeLeft}} Seconds Left....</p>
  </div>
</div>

<div class="" *ngIf="status == true">
  <div class="jumbotron" *ngFor="let pregunta of preguntas; index as i">
    <h3>{{pregunta.title}}</h3>
    <p>{{pregunta.text}}</p>
    <form #responseForm="ngForm" (ngSubmit)="onSubmit(responseForm)">
      <select class="" ngModel name="respuesta" #respuesta="ngModel">
        <option value="true">True</option>
        <option value="false">False</option>
      </select>
      <label>No cambiar uwu</label>
      <input type="text" name="iteracion2" ngModel #iteracion2="ngModel" value="{{i}}">
      <p>
        <input type="submit" value="Corregir">
      </p>
    </form>
    <span *ngIf="correccion[{{iteracion}}] == true">Correcto</span>
    <span *ngIf="correccion[{{iteracion}}] == false">Incorrecto</span>
  </div>
</div>

抱歉，我的代码中混用了西班牙语和英语。

Answer 1

应该这样使用:-

<span *ngIf="correccion[iteracion] == true">Correcto</span>

Answer 2

请这样使用

  <span *ngIf="correccion[iteracion] === true">Correcto</span>
    <span *ngIf="correccion[iteracion] === false">Incorrecto</span>

我如何使用 angular 插值作为数组中的索引？

How can i use angular interpolation as index in an array?

interpolation

angular