Привязка класса при применении его к * ngFor для элемента - PullRequest
Новая
       5

Привязка класса при применении его к * ngFor для элемента

0 голосов
/ 31 августа 2018

Мне нужна помощь, и по какой-то причине я не могу придумать, как ее решить

У меня есть массив объектов, через которые я зацикливаюсь с * ngFor с

Я хочу добавить привязку класса к полю (подробности описания) в моем массиве, но я не хочу, чтобы действие происходило с каждым «Подробным описанием»

, с которым я работаю. Не уверен, что это возможно. Надеюсь, у меня есть смысл.

В настоящее время, когда я раскрываю «Подробное описание», каждый объект, имеющий «Подробное описание», также расширяется (не хочу, чтобы это происходило)!

------ HTML ----------- 

<div *ngFor="let n of Entry">
        <ul class="list-group">
         <li>
          <p class="description"> Detailed Description
           <span class="glyphicon" [class.glyphicon-minus- 
           sign]="expandedDetails" [class.glyphicon-plus- 
           sign]="!expandedDetails" (click)="toggleDetails()"></span>
            </p>
            <span class="entryDetails" *ngIf="expandedDetails == true"> 
             {{n.description}}</span>

--------- TS ---------------------- 

toggleDetails() {
this.expandedDetails = !this.expandedDetails;

}

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Попробуйте это

Определить переменную переключения в файле TS 

 toggle=[]

В вашем html измените ваш код следующим образом 

<div *ngFor="let n of Entry;let i =index">
        <ul class="list-group">
         <li>
          <p class="description"> Detailed Description
           <span class="glyphicon" [class.glyphicon-minus- 
           sign]="expandedDetails" [class.glyphicon-plus- 
           sign]="!expandedDetails" (click)="toggle[i]=toggle[i]  "></span>
            </p>
            <span class="entryDetails" *ngIf=" toggle[i]"> 
             {{n.description}}</span>
0 голосов
/ 31 августа 2018

Вы хотите использовать trackby $ index для for-each, затем вы можете использовать это значение для перехода к toggleDetails. Таким образом, вы будете открывать только детали для этой строки / элемента.

Позвольте мне привести пример

...