У меня есть панель расширения, которая содержит список данных.Когда компонент загружается, я хочу развернуть панель, если длина его данных равна 0, и свернуть, если длина его данных больше 0.
После инициализации я хочу, чтобы панель расширялась толькоили свернуть, если пользователь нажимает на него.Поэтому, если длина данных панели изменяется с 0 на 1, я не хочу, чтобы панель затем свернулась, я хочу, чтобы она оставалась открытой.Проблема в том, что когда я использую [расширенный] ввод панели расширения, она продолжает проверять условие, поэтому, когда длина данных изменяется, она расширяется или сворачивается, даже если пользователь не щелкнул по ней.
<mat-expansion-panel [expanded]="!item.data.length">
<mat-expansion-panel-header>
<mat-panel-title>
Item with data
</mat-panel-title>
</mat-expansion-panel-header>
<div *ngFor="let data of item.data">
{{data.name}}
</div>
<button (click)="addDataToItem()">ADD DATA</button>
</mat-expansion-panel>
Желаемые результаты: Панель расширения первоначально раскрывается, если item.data.length равно 0, и первоначально свернута, если item.data.length больше 0. Затем, если пользователь нажимает кнопку ADD DATA, расширениепанель остается открытой.
Фактические результаты: Панель расширения первоначально раскрывается, если item.data.length равно 0, и сворачивается, если она больше 0. Но если пользователь нажимает ADD DATA,панель
закрывается, потому что длина больше 0.
Вот пример поведения.
Обратите внимание, как панель изначально расширяется, потому что длина равна 0, но затем, когда вы нажимаете ADD DATA, она сворачивается, потому что длина равна 1. Я бы хотел, чтобы она оставалась открытой.