Bootstrap Сетка не работает в Angular Компоненты, связывающиеся от родителя к ребенку

Question

app.component. html код

<div class="container">
    <div class="row" id="ads">
        <div class="col-xs-4">
        <app-card  *ngFor="let car of cars"
        [carNotifyBadge]="car.carNotifyBadge"
        [carNotifyYear]="car.carNotifyYear"
        [carCondition]="car.carCondition"
        [carPrice]="car.carPrice"
        [carUsageinKM]="car.carUsageinKM"
        [carName]="car.carName"
        [imgSource]="car.imgSource"
        >
        </app-card>

    </div>
    </div> 
    </div>

app.component.ts код

                             import { Component ,Input} from '@angular/core';

                         @Component({
                          selector: 'app-root',
                          templateUrl: './app.component.html',
                          styleUrls: ['./app.component.css']      
                         })
                            export class AppComponent {

                            title:string = "Angular-App"

                            cars = [

                                {....},{....},{....}

                    ]


                    }

card.component. html

                     <div class="card rounded">
                          <div class="card-image">
                              <span class="card-notify-badge">{{carNotifyBadge}}</span>
                              <span class="card-notify-year">{{carNotifyYear}}</span>
                              <img class="img-fluid" [src]="imgSource" alt="Alternate Text" />
                          </div>
                          <div class="card-image-overlay m-auto">
                              <span class="card-detail-badge">{{carCondition}}</span>
                              <span class="card-detail-badge">{{carPrice}}</span>
                              <span class="card-detail-badge">{{carUsageinKM}}</span>
                          </div>
                          <div class="card-body text-center">
                              <div class="ad-title m-auto">
                                  <h5>{{carName}}</h5>
                              </div>
                              <a class="ad-btn" href="#">View</a>
                          </div>
                      </div>

card.component.ts

                import { Component, OnInit, Input } from '@angular/core';

                @Component({
                  selector: 'app-card',
                  templateUrl: './card.component.html',
                  styleUrls: ['./card.component.css']
                })
                export class CardComponent implements OnInit {

                  constructor() { }

                  @Input()  carNotifyBadge = '';
                  @Input()  carUsageinKM = '';
                  @Input()  carName = '';
                  @Input()  carNoticarNotifyYearfyBadge = '';
                  @Input()  imgSource = '';
                  @Input()  carCondition = '';
                  @Input()  carPrice = '';
                  @Input()  carNotifyYear = '';

                  ngOnInit(): void {
                  }

                }

Поскольку в app.component. html Я использовал сеточную систему bootstrap и используя структурные директивы ng, поскольку я динамически добавляю элементы в DOM. Я ожидаю, что столбцы будут располагаться рядом, тогда как я получаю их ниже друг друга, как показано на рисунке.

Как отображать столбцы сбоку рядом согласно bootstrap поведению?

Answer 1

Убедитесь, что в приложение загружено bootstrap CSS, если нет, выполните следующие действия. Шаги по включению Bootstrap в Приложение

Передача только автомобильного элемента в дочерний компонент, все свойства в автомобильном объекте вы сможете получить в дочернем компоненте.

<div class="container">
    <div class="row" id="ads">
        <div class="col-xs-6 col-md-4" *ngFor="let car of cars">
          <app-card [car]="car"></app-card>
      </div>
    </div> 
</div>

В дочернем компоненте получите входные данные автомобильного объекта от родительского компонента. @ Input car;

Answer 2

убедитесь, что bootstrap входит в комплект поставки. css файл.

имеет '#ads' любые стили, которые переопределяют поведение начальной загрузки?

полезная ссылка для установки bootstrap с использованием - bootstrap - с - angular