Question

我有一个列表，列表中有许多元素，每个元素都是一个角度2组件，即ElementComponent。我使用* ngFor列出列表元素（ElementComponent1）。条件是什么，当点击一个元素时，会显示特定的div，当我点击另一个ElementComponent2时，需要关闭open div并打开一个带有元素2数据的新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.js

/*jshint esversion: 6 */

import { Component, Input, ViewChild, Pipe } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser'

import DynamicComponent from '../dynamic/dynamic.component';
import {SharedService} from '../../services/shared.service';

@Component({
    selector: 'element',
    templateUrl: "app/components/element/element.component.html"
})
export class ElementComponent {

    @Input('data') element;


    cardDescriptionShow(element) {

        this.list_data = element;
        this.description = true;
    }

    cardDescriptionHide() {
        this.description = false;
    }

}

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>

如何在角度2分量的不同* ngFor迭代之间使用共享变量

0 个答案: