我正在為我最喜歡的一個游戲制作一個簡單的輔助應用程式，順便學習Angular。我有一個包含按鈕串列的組件（"wing"），它將揭開一個子串列，由另一個子組件表示。然而，我現在的方式是，當我點擊一個給定的 "翼 "按鈕時，它也會揭開每個其他翼的遭遇子串列。
wing.component.html:
<ul>
<li *ngFor="let wing of wings" >
<button（click）="showEncounters = ! showEncounters">{{ wing.getName() }}</button>
<app-encounter
*ngIf="showEncounters"/span>
[encounters]="wing.getEncounters()">/span>
</app-encounter>/span>
</li>/span>
</ul>
wing.component.ts:
@Component（ {
selector: 'app-wing',
templateUrl: './wing.component.html'。
styleUrls: ['./wing.component.css']
})
export class WingComponent 實作 OnInit {
wings = WINGS;
showEncounters: boolean = false;
constructor（） {
}
ngOnInit（）。void {
}
wing.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。
}
encounter.component.html:
<ul *ngFor="let encounter of encounters"/span>>
<li>{{encounter.getName()}}</li>
</ul>
encounter.component.ts:
@Component（{
selector: 'app-encounter',
templateUrl: './encounter.component.html',
styleUrls: ['./encounter.component.css']
})
export class EncounterComponent 實作 OnInit {
@Input() encounters! Encounter[]。
constructor（） {
}
ngOnInit（）。void {
}
encounter.ts:
export class Encounter {
private readonly name?: string;
constructor（name: string）{
this.name = name。
}
public getName（）{
return this.name。
}
點擊任何按鈕前的可視化：
點擊任何按鈕之后：
這個問題似乎很容易發現--當我點擊一個按鈕時，"showEncounters "的布林值對其他每一個 "翼 "都會發生變化，然而我不知道如何去解決它。我曾想過在wing.ts類中添加一個 "顯示 "布林值，但我認為將HTML DOM邏輯與物件屬性混合在一起不是個好主意，所以我放棄了這個方法。什么才是正確的方式來顯示被點擊的翅膀的遭遇呢？
uj5u.com熱心網友回復：
你需要使用一個旗幟的地圖，而不是單一的旗幟：
@Component（{
selector: 'app-wing',
templateUrl: './wing.component.html'。
styleUrls: ['./wing.component.css']
})
export class WingComponent 實作 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()">/span>
</app-encounter>/span>
</li>/span>
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/329424.html
標籤：
上一篇：安全第二天