当我们在angular中点击链接时如何显示数据

Question

我有一个angular应用程序，在这个应用程序中，我有一个链接，即显示数据，当我们点击显示数据时，链接必须更改为隐藏数据。

，当我们点击隐藏数据时，数据必须被隐藏，链接需要更改为显示数据。

。component.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是真还是假。"Hide"文本之后?是指示当dataShown为真时应该发生什么，&;show &;text是当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;
}

我希望这有帮助!