У меня есть проблема, которую я нахожу довольно сложной. У меня есть небольшое окно поиска, которое я хочу использовать для фильтрации циклов в моем представлении. Мой взгляд состоит из классов и предметов.
В каждом классе есть несколько предметов, и каждый предмет может иметь дочерние предметы (они вложены и должны быть открыты).
Так что в основном у меня есть моя главная страница, как это (упрощенно):
<mat-form-field class="search-field">
<input matInput [(ngModel)]="searchKeyword" (keyup.enter)="search()">
</mat-form-field>
<class *ngFor="let class of classes" [class]="class" [mainController]="mainController"></class>
Мой класс выглядит примерно так:
<div>
{{ class.name }}
<item *ngFor="let item of group.items" [item]="item" [class]=class"></item>
</div>
А теперь у предмета может быть также больше предметов, он может зайти очень глубоко так:
<div *ngif="isExpanded">
{{ item.name }}
<item *ngFor="let item of item.childItems" [item]="item" [class]=class"></item>
</div>
Теперь я могу дать searchKeyword в качестве значения для каждого. Но я хочу показать группу только в том случае, если ее заголовок соответствует ключевому слову (затем отображаются все элементы) или если один из элементов в нем соответствует ключевому слову. Если элемент соответствует, он показывает только этот элемент в группе. Если какой-либо из childItems совпадает, он должен показать все родительские элементы (показывает, что он вложенный), и их, вероятно, следует развернуть. Как мне вернуть значение childItem наверх?
Редактировать: Думаю, мне удалось найти правильную вещь. Поэтому мне нужно значение @Input, чтобы дать ключевое слово каждому дочернему элементу, а затем мне нужно проверить совпадение, а затем мне нужно еще одно значение @Output (), которое я буду вызывать для emit с true. Поэтому я отображаю элемент, только если он не имеет значения searchKeyword, но если он есть, мне нужно отображать его только тогда, когда он становится истинным из внутреннего вывода. Я постараюсь реализовать это и сообщу.