Angular模式生成问题：无法获取预期输出

问题分析 #

当前代码的逻辑是每行从上次结束的字符开始生成对应数量的字符，导致前n-1行的起始字符不符合预期。预期模式为：前n-1行均从'A'开始，每行递增一个字符；第n行从累计的下一个字符起，生成n个连续字符。

解决方案 #

1. 明确模式规律 #

• 第1至第n-1行：每行起始字符固定为'A'，字符数量等于当前行号（第1行1个，第2行2个…第n-1行n-1个）
• 第n行：起始字符为'A' + (1+2+…+(n-1))（即'A' + n*(n-1)/2），生成n个连续字符

2. 修改生成逻辑代码 #

在组件的generatePattern方法中调整逻辑，分两部分生成行数据：

generatePattern() {
  if (this.n < 2 || this.n > 10) {
    this.pattern = [];
    alert('请输入2-10之间的数字');
    return;
  }

  const patternLines: string[] = [];
  // 生成前n-1行，每行从'A'开始
  for (let i = 1; i < this.n; i++) {
    const lineChars: string[] = [];
    for (let j = 0; j < i; j++) {
      lineChars.push(String.fromCharCode(65 + j));
    }
    patternLines.push(lineChars.join(' '));
  }

  // 计算第n行的起始字符
  const totalPreviousChars = this.n * (this.n - 1) / 2;
  const startCharCode = 65 + totalPreviousChars;
  const lastLineChars: string[] = [];
  for (let k = 0; k < this.n; k++) {
    lastLineChars.push(String.fromCharCode(startCharCode + k));
  }
  patternLines.push(lastLineChars.join(' '));

  this.pattern = patternLines;
}

3. 模板渲染调整 #

确保模板正确渲染每行内容：

<div *ngFor="let line of pattern">
  {{ line }}
</div>

验证结果 #

• 输入n=3时输出：

A

A B

C D E

• 输入n=4时输出：

A

A B

A B C

D E F G

内容的提问来源于stack exchange，提问作者Dhana