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

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

I've got this:

... but I want it to look like this (so I can fit more items than before without making the card bigger):

这是我目前拥有的代码，它绝对不执行任何操作（它只显示第一张图像）：

<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) 根本没有被应用。

为什么会发生这种情况？

EDIT:

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

父组件使用“卡片”，就像您在本文上方看到的那样。所以，主模板如下所示：

“cards”组件有一个 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(){

    }

}

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

这一刻真的变得很奇怪。谁能发现这里出了什么问题吗？

问题是你有两个class每个 div 的属性，因此 Angular 仅采用后面的类。

只需合并类属性，例如：

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

并且这两个类都将被应用。

您实际上可以使用 less 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>