angular - 另一个组件中的 Angular 组件列表

Question

我正在为我最喜欢的游戏之一制作一个简单的帮助应用程序，顺便学习 Angular。我有一个包含按钮列表的组件（“机翼”），它将发现一个子列表，该子列表由另一个子组件表示。但是，按照我现在的方式，当我单击给定的“机翼”按钮时，它也会显示每个其他机翼的遭遇子列表。这是我的“机翼”组件的代码：

wing.component.html：

<ul>
  <li *ngFor="let wing of wings">
    <button (click)="showEncounters = !showEncounters">{{ wing.getName() }}</button>
    <app-encounter
      *ngIf="showEncounters"
      [encounters]="wing.getEncounters()">
    </app-encounter>
  </li>
</ul>

wing.component.ts：

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

  wings = WINGS;
  showEncounters: boolean = false;

  constructor() {
  }

  ngOnInit(): void {
  }

}

翼.ts：

export class Wing {

  private readonly name : string;
  private readonly encounters: Encounter[] = [];

  constructor(name: string, encounters: Encounter[]) {
    this.name = name;
    this.encounters = encounters;
  }

  public getName() {
    return this.name;
  }

  public getEncounters() {
    return this.encounters;
  }
}

遇到.component.html：

<ul *ngFor="let encounter of encounters">
  <li>{{encounter.getName()}}</li>
</ul>

遇到.component.ts：

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

  @Input() encounters!: Encounter[];

  constructor() {
  }

  ngOnInit(): void {
  }

}

遇到.ts：

export class Encounter {

  private readonly name?: string;

  constructor(name: string){
    this.name = name;
  }

  public getName() {
    return this.name;
  }

}

单击任何按钮之前的可视化：

点击任意按钮后：

这个问题似乎很容易发现——当我点击一个按钮时，“showEncounters”布尔值会随着其他“wing”而改变，但我不知道如何解决它。我正在考虑向wing.ts 类添加一个“显示”布尔值，但我认为将HTML DOM 逻辑与对象属性混合不是一个好主意，所以我放弃了这种方法。仅显示点击机翼遭遇的正确方法是什么？

标签： angulartypescriptloopsif-statement

Answer 1

您需要使用标志映射而不是单个标志：

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

  wings = WINGS;
  showEncounters: { [name: string]: boolean } = {};

  constructor() {
  }

  ngOnInit(): void {
  }

}

...

<ul>
  <li *ngFor="let wing of wings">
    <button (click)="showEncounters[wing.getName()] = !showEncounters[wing.getName()]">{{ wing.getName() }}</button>
    <app-encounter
      *ngIf="showEncounters[wing.getName()]"
      [encounters]="wing.getEncounters()">
    </app-encounter>
  </li>
</ul>