html - Bootstrap Grid System 在从父到子通信的 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 = [

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

                    ]


                    }

卡片组件.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 的网格系统并使用结构指令 ngFor 我动态地向 DOM 添加元素。我希望 cols 并排，而我将它放在彼此下方，如图所示。



如何根据引导行为并排显示列？

Answer 1

如果没有，请确保在应用程序中加载了 bootstrap CSS，请按照以下步骤操作。
Steps to include Bootstrap in Application

只将汽车元素传递给子组件，汽车对象中的所有属性都可以在子组件中访问。

<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>

在子组件中，从父组件接收汽车对象输入。
@输入车；