Angular 如何使用不同*Ng之间的共享变量进行角度2分量的迭代

我有一个列表，列表有很多元素，每个元素都是一个角度2分量，即ElementComponent。 我使用*ngFor列出了列表元素（ElementComponent1）。 条件是，当单击一个元素时，会显示特定的div，当我单击另一个ElementComponent2时，打开的div需要关闭，并打开一个包含元素2数据的新div

但是，当我单击另一个组件时，这个.variable引用会被更改，新的div将在旧的div上打开

我可以在组件的迭代中使用任何共享变量功能吗

我正在添加代码屏幕- 使用*ngFor添加组件

<span *ngFor="let card of list.cards; let i = index" class="card card_list">
<element id="{{card.id}}" [data]="card"></element>

element.component.html

<a class="card_list_title" (click)="cardDescriptionShow(element)" >{{element.title}}
</a>

<div *ngIf="description" class="card_desc pd_20" id="test">
    <div class="m_btm10">
        <span class="glyphicon glyphicon-th-list"></span><span class="card_desc_heading">{{list_data.title}}</span>
        <a class="card_list_title" (click)="cardDescriptionHide()" ><span class="glyphicon glyphicon-remove"></span></a>
    </div>

    <div class="list_card_description">
        <description></description>
    </div>
</div>

{{element.title}
{{list_data.title}

请共享代码。请将代码添加为文本，而不是屏幕截图。

<a class="card_list_title" (click)="cardDescriptionShow(element)" >{{element.title}}
</a>

<div *ngIf="description" class="card_desc pd_20" id="test">
    <div class="m_btm10">
        <span class="glyphicon glyphicon-th-list"></span><span class="card_desc_heading">{{list_data.title}}</span>
        <a class="card_list_title" (click)="cardDescriptionHide()" ><span class="glyphicon glyphicon-remove"></span></a>
    </div>

    <div class="list_card_description">
        <description></description>
    </div>
</div>