當我們點擊角度鏈接時如何顯示數據

Question

我有一個角度應用程序 在這個 II 中有一個鏈接，即顯示數據，當我們單擊顯示數據時，必須更改鏈接以隱藏顯示數據中的數據。

當我們單擊隱藏數據時，必須隱藏數據並且需要更改鏈接以顯示數據。

. 組件.html

<a >show data</a>
<a>hide data</a>
<div>
//here needs to show the data
</div>

任何人都可以幫助我嗎

Answer 1

如果我沒看錯你的問題，聽起來你想要一個點擊事件來顯示一些數據。 有幾種方法可以做到這一點。 這是一個例子：

在 html 中，您將向錨標記添加一個單擊事件處理程序，該處理程序將調用函數 toggleData()。 然后，在 typescript 函數中，您可以將名為“dataShown”的屬性設置為與其當前值相反的值。 在您的 html 中，您可以使用 *ngIf 指令在 dataShown 為真時顯示數據，如果為假則不顯示數據。 如果您願意，可以使用 *ngFor 指令循環遍歷數據項列表。 要更改鏈接的文本，在 {{ }} 和花括號內有字符串插值，我們可以使用三元運算符來檢查 dataShown 是真還是假。 緊跟在 ? 后面的“隱藏”文本是指示如果 dataShown 為 true 應該發生什么，“Show”文本是如果 dataShown 為 false 應該發生什么。

your.component.html:
<a (click)="toggleData()">{{ dataShown ? "Hide" : "Show" }} Data</a>
<div *ngIf="dataShown">
    <div *ngFor="let dataItem of dataList">
        {{ dataItem.title }}
    </div>
</div>

your.component.ts (in the 'export class' section):
dataList: dataItem[]; // This assumes you have a dataItem class or interface with a title property
dataShown: boolean = false; // Data not shown by default, could be true if desired.
toggleData() : void {
    this.dataShown = !this.dataShown;
}

我希望這有幫助！