如何使用ngFor循环根据选择的前两个值选择第三个值列表

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  firstValues = ['A', 'B', 'C'];
  secondValues = ['1', '2', '3'];
  thirdValues = [];

  generateThirdValues() {
    // 根据选择的前两个值生成第三个值列表的逻辑代码
    if (this.firstValue === 'A' && this.secondValue === '1') {
      this.thirdValues = ['X', 'Y', 'Z'];
    } else if (this.firstValue === 'B' && this.secondValue === '2') {
      this.thirdValues = ['P', 'Q', 'R'];
    } else {
      this.thirdValues = [];
    }
  }
}

<label for="firstValue">第一个值：</label>
<select id="firstValue" [(ngModel)]="firstValue">
  <option *ngFor="let value of firstValues" [value]="value">{{ value }}</option>
</select>

<label for="secondValue">第二个值：</label>
<select id="secondValue" [(ngModel)]="secondValue">
  <option *ngFor="let value of secondValues" [value]="value">{{ value }}</option>
</select>

<label for="thirdValue">第三个值：</label>
<select id="thirdValue">
  <option *ngFor="let value of thirdValues" [value]="value">{{ value }}</option>
</select>

<button (click)="generateThirdValues()">生成第三个值列表</button>