Показать конкретный Div внутри ngFor
У меня есть куча карт, использующих ngFor с информацией о пользователе. Внутри карты есть кнопка, которая будет отображать информацию о путешествии для этого конкретного пользователя.
Я создал div с начальным состоянием display: none. Я думал об использовании ngStyle для привязки свойства display: block при нажатии, но проблема в том, что отображаются все элементы div, а не только тот, который мне нужен.
Любые предложения о том, как я могу это сделать?
HTML
<div class = "col s12 m6 l4" *ngFor = "let student of students; let i = index">
<i class = "material-icons" (click) = "showBox()">access_alarm</i>
<div class = "travel-info" [ngStyle] = "{'display': boxDisplay == true ? 'block' : 'none'}" >
<app-travel-info ></app-travel-info>
</div>
</div>
тс
boxDisplay = false;
showBox() {
this.boxDisplay = true;
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вам нужно отображать свойство с каждым элементом массива студентов, а затем включать/отключать на основе индекса,
<div class = "col s12 m6 l4" *ngFor = "let student of students; let i = index">
<i class = "material-icons" (click) = "showBox(student)">access_alarm</i>
<div class = "travel-info" [ngStyle]"{'display': student.boxDisplay == true ? 'block' : 'none'}" >
<app-travel-info ></app-travel-info>
</div>
</div>
showBox(student:any) {
student.boxDisplay = true;
}
Проблема в том, что у вас есть только одна переменная, которая установлена для всех из них.
Вы захотите реорганизовать showBox, чтобы он выглядел примерно так.
ТС
this.boxDisplay = this.students.map(s => false);
showBox(index) {
this.boxDisplay[index] = true;
}
HTML
<div class = "col s12 m6 l4" *ngFor = "let student of students; let i = index">
<i class = "material-icons" (click) = "showBox(i)">access_alarm</i>
<div class = "travel-info" [ngStyle] = "{'display': boxDisplay[i] == true ? 'block' : 'none'}" >
<app-travel-info ></app-travel-info>
</div>
</div>
Если бы это был я, я бы использовал ngIf вместо ngStyle.
<div class = "col s12 m6 l4" *ngFor = "let student of students; let i = index">
<i class = "material-icons" (click) = "showBox(i)">access_alarm</i>
<div class = "travel-info" *ngIf = "boxDisplay[i]" >
<app-travel-info ></app-travel-info>
</div>
</div>
Вы можете использовать @ViewChildren. Я даю вам этот пример:
Ваш HTML:
<div class = "student-container" *ngFor = "let s of students; let i = index">
<span>Name: {{s.name}} - Index: {{i}}</span>
<div class = "student-box" #boxes>
<span>Hey! I'm opened.</span>
<span>My Secret Number is: {{s.secretNumber}}</span>
</div>
<button (click) = "toggleBox(i)">Click Me!</button>
</div>
Ваш компонент:
import { Component, ViewChildren, QueryList, ElementRef } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChildren("boxes") private boxes: QueryList<ElementRef>;
students = [
{ name: "Peter", secretNumber: "88" },
{ name: "Laura", secretNumber: "45" },
{ name: "Paul", secretNumber: "13" }
];
toggleBox(index) {
let nativeElement = this.boxes.toArray()[index].nativeElement;
nativeElement.style.display =
nativeElement.style.display === "none" || !nativeElement.style.display
? "block"
: "none";
}
}
Ваш CSS:
.student-container {
background: lightblue;
margin: 10px;
padding: 10px;
}
.student-box {
display: none;
}
https://codesandbox.io/s/zwqoxp583x
@iconio Я думаю, вы также можете добавить логический атрибут к своему «объекту учащегося», что-то вроде «isOpen», а в вашем методе toggleBox используйте индекс для поиска вашего ученика в массиве учеников и установите для переменной isOpen значение true или false в зависимости от случае (может быть, что-то вроде student.isOpen = !student.isOpen). Затем вы можете не использовать ViewChildren, если ваш отображаемый список слишком длинный, и просто использовать *ngIf с этой переменной student.isOpen и удалить шаблон #boxes ref var. Надеюсь, поможет!
Привет, @Nicolas M, большое спасибо! Это сработало отлично!