angular - 反转 Angular 组件的 HTML

Question

你好，
我的项目的 html 有问题。
目前，我有一个这样的选项卡组件:

<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statusChangementPrix" [statusCounter]="statusVendu">
    </app-graphic>
  </div>
</div>
<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statutNouveauBien" [statusCounter]="statusOffre">
    </app-graphic>
  </div>
</div>
<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statusNouveauCompromis" [statusCounter]="statusArchive">
    </app-graphic>
  </div>
</div>

在此选项卡组件中，我将图形组件乘以 3 倍:

<div class="wrapper-row-graphic">
  <div class="wrapper-graphic">
    <div class="wrapper-indicator">
      <div class="indicator-graphic">
        <button mat-mini-fab 
           color="primary" 
           class="figureGraphic" 
           *ngIf='graphicData'>
           {{graphicData.length}}
        </button>
      </div>
      <div class="status">
        <h4 *ngIf='statusGraphic'>{{statusGraphic}}</h4>
      </div>
    </div>
    <div class="graphic">
      <highcharts-chart 
        [Highcharts]="Highcharts" 
        [options]="chartOptions" 
        style="height: 150px; display: block;">
      </highcharts-chart>
      <!-- <div id="container" style="height: 150px; margin: 2px;"></div> -->
    </div>
  </div>
  <div class="wrapper-infos">
    <div class="indicator-counter">
      <button mat-fab color="primary" class="figureIndicator">
        <mat-icon *ngIf='counterData'>{{counterData.length}}</mat-icon>
      </button>
    </div>
    <div class="infos">
      <h4 *ngIf='statusCounter'>{{statusCounter}}</h4>
    </div>
  </div>
</div>

我想知道是否可以在选项卡组件中反转组件的方向？
因为目前这 3 个图形组件是相同的。
左边是图形，右边是计数器。我想将计数器放在左侧，将图表放在第二行的右侧。
我尝试了行反转，但看起来不太好。

Answer 1

您可以创建一个数组，您可以在其中保留组件输入值的引用，即

this.graphic = [{
    statusGraphic: statusChangementPrix,
    statusCounter, statusVendu
},{
    statusGraphic: statutNouveauBien,
    statusCounter, statusOffre
},{
    statusGraphic: statusNouveauCompromis,
    statusCounter, statusArchive
}]

并使用 *ngFor 呈现 HTML

<div class="row-page" *ngFor="let item of graphic">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="item.statusGraphic" [statusCounter]="item.statusCounter">
    </app-graphic>
  </div>
</div>

然后对数组执行反向操作。