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 中我使用了引導程序的網格系統並使用結構指令 ngFor 我動態地向 DOM 添加元素。 我希望 cols 並排，而我將它放在彼此下方，如圖所示。

如何根據引導行為並排顯示列？

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>

在子組件中，從父組件接收汽車對象輸入。 @輸入車；

Answer 2

確保該引導程序包含在您的 bundled.css 文件中。

有“#ads”覆蓋引導行為的任何樣式？

使用-bootstrap-with-angular安裝引導程序的有用鏈接

Answer 3

我有類似的問題。 我使用引導程序和基於它的商業主題。 我試圖在引導網格中顯示記錄列表。

我有顯示網頁的主要應用程序組件。 然后我有卡片列表組件，它在應用程序組件中顯示網格列表。

當我輸入：

  styleUrls: [
'./credential-card.component.css',
'../../assets/css/bootstrap.min.css',
'../../assets/css/style.css']

卡片樣式正確，但網格不起作用。 當我刪除樣式時

  styleUrls: [
'./credential-card.component.css']

我失去了樣式，但網格工作正常。

解決問題的是實現另一個組件 card-detail 並從 card-list 調用它。 我從卡片列表中刪除了引導 CSS，並添加到卡片詳細信息中。

最后，我在卡片列表組件中有這樣的東西：

<section class="pricing-wrapper pt-70 pb-100">
<div class="container">
    <div class="row justify-content-center">
        <div *ngFor="let item of credentials" class="col-lg-4 col-md-6 col-sm-8">
            <card-detail [shortName]="item.payload.doc.data().shortName" [priceDescription]="item.payload.doc.data().priceDescription"></card-detail>
        </div>
    </div>
</div>

這是卡片詳細信息：

<div class="pricing-style-5 mt-30">
    <div class="pricing-header">
        <div class="pricing d-flex align-items-center flex-wrap">
            <h3 class="heading-3 font-weight-400 title">{{shortName}}</h3>
            <span class="price">{{priceDescription}}</span>
        </div>
    </div>
</div>