angular - 使用 Angular 和 Bootstrap 条件的动态卡片

Question

我正在尝试使我的卡片充满活力，但它们有一个条件。我检查了角度文档，但找不到答案。基本上我有一个卡片组件，点击导航链接的条件是它显示一组卡片，另一个显示另一组卡片。对于每个条件，组件卡调用卡项 3 次。在我的组件卡片项目中，我似乎找不到如何应用该条件并在我的 ts.xml 中引用任何一组卡片项目内容。这是代码。

<--! HTML OF CARDS -->

 <div class="cardbg">
     <ul class="nav topnav active justify-content-center">
      <li class="nav-item item-1">
        <a class="nav-link" (click)="toggle(1)">Je suis Consultant</a>
      </li>
      <li class="nav-item item-2">
        <a class="nav-link" (click)="toggle(2)">Je suis Partenaire</a>
      </li>
    </ul>


  <hr class="m-0">


     <!-- OFFRES -->
    <div *ngIf="consulant">
      <div class="d-flex flex-row justify-content-center">
        <h4 class="mt-3">Offres</h4>
      </div>
      <app-card-item>[offres]="offres"</app-card-item>
      <app-card-item>[offres]="offres"</app-card-item>
      <app-card-item>[offres]="offres"</app-card-item>
    </div>

    <!--  CV  -->
    <div *ngIf="company">
        <div class="d-flex flex-row justify-content-center">
          <h4 class="mt-3">CV</h4>
        </div>
        <app-card-item>[cv]="cv"</app-card-item>
        <app-card-item>[cv]="cv"</app-card-item>
        <app-card-item>[cv]="cv"</app-card-item>
    </div>


</div>

<--! TS OF CARDS -->
import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-cards",
  templateUrl: "./cards.component.html",
  styleUrls: ["./cards.component.scss"]
})
export class CardsComponent implements OnInit {



 constructor() { }

   company: boolean = false;
   consulant: boolean = true;

   toggle(elem: number) {
     if (elem == 1) {
     this.consulant = true;
     this.company = false;
   }
   if (elem == 2) {
    this.consulant = false;
   this.company = true;
   }
 }
 ngOnInit() {}
 }

<--! HTML OF CARD ITEM -->

<div class="row mx-2">
  <div class="col-lg-4 col-md-4 col-sm-5 col-xs-4" *ngFor="let x of card-item">
    <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{x.titre}}</h5>
          <p class="card-text">{{x.contenu}}</p>
          <p class="card-subtitle">{{x.montant}}</p>
        </div>
      </div>
 </div>

 <-- TS OF CARD-ITEM -->

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

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


    offres = [
    {titre: "Architectes Sécurité",
    contenu: "Nous recherchons un Architecte sécurité pour une mission longue (3 mois 
    renouvelables horizon 2 ans voire plus) Paris intra-muros.",
    montant: " Partenaire historique F2I - TJM 700€"
    },
   {titre: "ingénieur de Production AIX/LINUX",
   contenu: "Nous recherchons un Ingénieur de Production AIX/LINUX sur St Quentin (78) pour 
   une mission de plusieurs mois.",
   montant: "Partenaire historique F2I - TJM 600€"
   },
  {titre: "Chef de Projet Technique",
  contenu: "Nous rechercons un Concepteur Technique / Chef de projet Contexte : Fusion de 
  deux plateformes et d'une migration d'une soixantaine de sites Missions.",
  montant: "Partenaire historique F2I - TJM 600€"
  }

 ]

 cv = [
 {titre: "Expert JAVA SWING / JEE / JAVA",
  contenu: "Ingénieur d'étude (30 ans - 78 Versailles). AB INITO, C++? COBRA, ORACLE, POWER 
 AMC, SCRIPT SHELL, DATASTAGE, DECISIONNEL, Big Data.",
 montant: "TJM: 500€"
 },
 {titre: "Architecte UNIX",
 contenu: "Architecte, Consultant Technique - Architecte (35 ans - 77 Villeparisis). UNIX, 
 VMWARE, CITRIX, WINDOWS.",
 montant: "TJM: 650€"

 },
 {titre: "PROJECT MANAGEMENT OFFICE",
 contenu: "Assistant à Maîtrise d'Ouvrage - PMO (32 ans - 75 Paris). PROJECT MANAGEMENT 
 OFFICE, MS OFFICE, MS PROJECT? GLOBAL PORTFOLIO.",
 montant: "TJM: 500€"

   }
 ]

constructor() { }

ngOnInit() {
 }

}

标签： angulardynamicbootstrap-cards