使用ng-container包装ngIf条件并将数据放在ng-container中。这可以确保当ngIf条件返回true时,数据才会被渲染出来。
例如,以下代码段同时显示了条件为false时的ng-container和条件为true时的数据,导致初始渲染时数据也会被显示:
Data to be displayed
ngIf condition displays both data on Initial render
为了解决这个问题,我们可以将数据包裹在ng-container中,如下所示:
Data to be displayed
Only shown when ngIf condition returns false
这样,当ngIf条件返回true时,数据才会被渲染出来。同时,即使条件为false,ng-container内部的元素也不会被渲染,因此数据不会在初始渲染时同时被显示。