使用ngFor的Angular表乘法

for循环应以零开始,以结束 < 条件如下所示。

此外,我们还需要循环通过 results 数组而不是原来的数组,这是出于性能目的,点击按钮就会设置并渲染值!

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    Enter Table Number: <input type="text" #tablenumber />
<button (click)="calculate(tablenumber.value)">Multiply Table</button>
<h3 *ngFor="let val of result; let i = index;">
  {{val}}</h3>
  `,
})
export class App {
  result: any = [];
  calcnums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  calculate(tablenumber: string) {
    this.result = [];
    if (tablenumber && +tablenumber !== 0) {
      for (let i = 0; i < 12; i++) {
        this.result.push(this.getContent(tablenumber, this.calcnums[i]));
      }
    }
  }

  getContent(val: any, i: number) {
    return `${parseFloat(val)} * ${i} = ${i * parseFloat(val)}`;
  }
}

bootstrapApplication(App);

stackblitz