angular - Highchart graphs embedded in ngfor table disappear when a row filter is applied

Question

I have a table which outputs 20 rows of stock symbols and a corresponding highchart graph for each stock. When I apply a filter to search for a specific stock symbol the highchart graph for that row is preserved, but all the rest are gone. Is there anyway to preserve all the highchart graphs when I remove the filter and the full list is displayed again?

<input type="text" [(ngModel)]="query">

<ng-container *ngFor='let stock of (Stocks | fullTextSearch:query:"tickerSymbol") ; let i = index; let p = index' >

<tr>
<td>{{ stock.tickerSymbol }}</td>
<td> 
        <div *ngIf= 'i == p'>
                <div id="graph-small">
                    <ng-container>
                            <div id="containerC{{p}}"></div>
                    </ng-container>
                </div>
        </div>    
</td>
</tr>

</ng-container>

标签： angulartypescripthighcharts