Angular и Bootrap 4: сетка уничтожается с помощью ngFor

Question

Я пытаюсь получить сетку из 2 столбцов для списка изображений

С этим кодом:

<div class="row">
    <div class="col-md-6">
        <img src="http://...225636.png"
            style="width: 100%; height: auto;">
    </div>
    <div class="col-md-6">
        <img src="http://...225636.png"
            style="width: 100%; height: auto;">
    </div>
    <div class="col-md-6">
        <img src="http://...225636.png"
            style="width: 100%; height: auto;">
    </div>
</div>

=> Отображение сетки красиво с 2 столбцами

Но когда я пытаюсь использовать ngFor для создания сетки:

<div class="row">
    <div *ngFor="let asset of assets">
        <div class="col-md-6">
            <img src="http://...225636.png"
                style="width: 100%; height: auto;">
        </div>
    </div>
</div>

=> Сетка из 2 столбцов не отображается, вместо этого отображается список из одного столбца

Любое предложение приветствуется.

Answer 1

.col должен быть прямо под .row, как в первом примере.Я не уверен, почему вы ввели здесь дополнительный div.

<div class="row">
    <div *ngFor="let asset of assets" class="col-md-6">
        <img src="http://...225636.png"
             style="width: 100%; height: auto;">
    </div>
</div>

Answer 2

В качестве альтернативы используйте ng-container для исчезающего "элемента".

<div class="row">
    <ng-container *ngFor="let asset of assets">
        <div class="col-md-6">
            <img src="http://...225636.png"
                style="width: 100%; height: auto;">
        </div>
    </ng-container>
</div>

Это наиболее полезно, когда вы не можете ввести промежуточный элемент, например, между <ul> и его <li> прямымдети.

Answer 3

Работает ли это:

<div class="row">
    <div class="col-md-6" *ngFor="let asset of assets">
            <img src="http://...225636.png"
                style="width: 100%; height: auto;">
    </div>
</div>