制作 Angular *ngFor 绘制两列不同的数据[关闭]

Question

我正在尝试创建一个 *ngFor 指令来将数据放在两列中，而不是像往常一样只放在一列中。我什至遵循了我在那里看到的一个例子，但它根本不起作用。让我们从图形部分开始：

我有这个：

...但我希望它看起来像这样（这样我可以在不使卡片变大的情况下容纳比以前更多的物品）：

这是我目前拥有的代码，它什么都不做（它只显示第一张图片）：

<div class="col-6-md" *ngFor="let level of config?.selectedLevels; let i = index">
      <div class="col-md-6" class="left-style" *ngIf="i%2 == 0">
          <a href="javascript:void(0)" [style.cursor]="cursor(level)"  class="btn-flat white separator" (click)="deselectLevel(level)">
              <i class="fa fa-times">
              </i> 
              {{ level?.label || level }}
            </a>          
      </div>  
      <div class="col-md-6" class="right-style" *ngIf="i%2 != 0">
          <a href="javascript:void(0)" [style.cursor]="cursor(level)"  class="btn-flat white separator" (click)="deselectLevel(level)">
              <i class="fa fa-times">
              </i> 
              {{ level?.label || level }}
            </a>           
      </div>  
</div>

这使用以下 CSS：

.left-style{
    float:left;
    width:45%;
}
.right-style{
    float:right;
    width:45%;
}

我知道在这个示例中不需要它，但它只是一个尝试。我很困惑为什么这根本不起作用。在创建的 div 中，根本没有应用引导类 (col-md-6)。

为什么会这样？

编辑：

让我稍微扩展一下应用程序的外观，以便轻松找出正在发生的事情。在尝试了其他不起作用的方法之后，我想是时候让您更广泛地了解这是什么样的，以便找出如何解决这个奇怪的问题。

父组件使用“卡片”，就像你在这篇文章中看到的那样。因此，主模板如下所示：

“卡片”组件有一个 ng-content，它在我提供的另一个组件中绘制，正如您在父组件的实现中看到的那样。这是卡片组件：

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


@Component({
    selector: "card",
    styleUrls: ["./card.css"],
    template: `
    <div class="col card">
      <div class="row card-header">
        {{title}}
      </div>
      <div class="margin">
      <ng-content></ng-content>

    </div>
    `
})

export class Card{

    @Input() title: string;

    constructor(){

    }

}

不知何故，正如我在第一个建议答案的 cmets 中所说，div 没有像往常一样编译引导类：

此刻变得非常奇怪。谁能发现这里出了什么问题？

Answer 1

问题是每个 div 有两个 class 属性，因此 Angular 只采用后者。

只需合并类属性，如：

<div class="left-style col-md-6" *ngIf="i%2 == 0">

这两个类都将被应用。

其实可以少用html，用ngClass如下

 <div class="col-md-6" [ngClass]="{'left-style': i%2 != 0, 'right-style': i%2 === 0 }">
      <a href="javascript:void(0)" [style.cursor]="cursor(level)"  class="btn-flat white separator" (click)="deselectLevel(level)">
          <i class="fa fa-times">
          </i> 
          {{ level?.label || level }}
        </a>           
  </div>