Стилизация dom элементов, сгенерированных ngfor
Другое событие NullPointerException возникает, когда объявляется массив объектов, а затем сразу же пытается разыменовать его внутри.
String[] phrases = new String[10];
String keyPhrase = "Bird";
for(String phrase : phrases) {
System.out.println(phrase.equals(keyPhrase));
}
Этот конкретный NPE можно избежать, если порядок сравнения отменяется ; а именно, использовать .equals для гарантированного непустого объекта.
Все элементы внутри массива инициализируются их общим начальным значением ; для любого типа массива объектов, это означает, что все элементы null.
Вы должны инициализировать элементы в массиве перед доступом или разыменованием их.
String[] phrases = new String[] {"The bird", "A bird", "My bird", "Bird"};
String keyPhrase = "Bird";
for(String phrase : phrases) {
System.out.println(phrase.equals(keyPhrase));
}
1 ответ
Проверьте пример реализации здесь WORKING STACKBLITZ
Если у вас есть начальная загрузка в вашем приложении, добавьте class="d-flex flex-wrap" like below
<div id="backGroundImage">
<div id="salesPageContainer">
<div id="saleItemsContainer" class="d-flex flex-wrap">
<div *ngFor="let saleItem of saleItems" id="itemContainer" >
<p id="itemName">{{ saleItem.itemName }}</p>
<p id="itemPrice">{{ saleItem.itemPrice }}</p>
<img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
</div>
</div>
</div>
</div>
В простой CSS применять CSS display: flex; flex-wrap: wrap; к id="saleItemsContainer"
<div id="backGroundImage">
<div id="salesPageContainer">
<div id="saleItemsContainer">
<div *ngFor="let saleItem of saleItems" id="itemContainer" >
<p id="itemName">{{ saleItem.itemName }}</p>
<p id="itemPrice">{{ saleItem.itemPrice }}</p>
<img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
</div>
</div>
</div>
</div>