Javascript 为绘制两列不同的数据制作一个角度*Ng

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

我有这个：

。。。但我希望它看起来像这样（这样我就可以在不使卡片变大的情况下装更多的物品）：

这是我目前拥有的代码，它完全不起任何作用（它只显示第一幅图像）：

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

为什么会这样

编辑：

让我稍微扩展一下这个应用程序的外观，这样就可以很容易地了解到底发生了什么。在尝试了其他没有真正起作用的方法之后，我想是时候给你一个更广阔的视角来看待这个问题了，以便找出如何解决这个奇怪的问题

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

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

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(){

    }

}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“卡片”，
样式URL:[“/card.css”]，
模板：`
{{title}}
`
})
出口信用卡{
@输入（）标题：字符串；
构造函数（）{
}
}

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

---

现在真的很奇怪。有人能发现这里出了什么问题吗？

问题是每个div都有两个

class

属性，因此Angular只接受后面的类

只需合并class属性，如下所示：

这两个课程都将适用

实际上，您可以使用较少的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>  

简易方法： 我正在制作

Angular

演示

英雄之旅

，我想将仪表板数据*分为两列显示；（像这样）

这是一段代码，它现在对我有效：

<!--repeater creates as many links as
          are in the component's heroes array.-->
    <a *ngFor="let hero of heroes;" routerLink="/detail/{{hero.id}}">       
      <!--ESTE STYLE SIRVE PARA QUE NO SE DEMADRE EL TAMAÑO DE CADA
      DIV, ELLIPSIS AYUDA EN ESTO-->
      <div style="
       width: 50%;
       float: left;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;"
       class="module hero">
          {{hero.name}}            
      </div>         
    </a>

{{hero.name}

感谢您的帮助，尽管所有解决方案都不起作用。它仍然在一列中绘制所有列表：/它是否应用了类？否。创建的div如下所示：“嗯，我非常怀疑这一点。你能创建一个plunkr吗？或者把你的代码放在GIT上？我不能，因为这是商业代码。但我会扩大帖子，好吗？所以更容易理解发生了什么，因为我一直在编辑错误的文件。只是周一的事情。对不起，占用了你的时间！如果我们需要按字母顺序创建三列呢？

 <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>  

<!--repeater creates as many links as
          are in the component's heroes array.-->
    <a *ngFor="let hero of heroes;" routerLink="/detail/{{hero.id}}">       
      <!--ESTE STYLE SIRVE PARA QUE NO SE DEMADRE EL TAMAÑO DE CADA
      DIV, ELLIPSIS AYUDA EN ESTO-->
      <div style="
       width: 50%;
       float: left;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;"
       class="module hero">
          {{hero.name}}            
      </div>         
    </a>