Question

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

我有这个：

...但我希望它看起来像这样（所以我可以比以前更多的物品而不会使卡更大）：

这是我目前拥有的代码，它绝对没有任何内容（它只显示第一张图片）：

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

这使用以下CSS：

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中，bootstrap类（col-md-6）根本没有被应用。

为什么会这样？

修改

让我稍微展开应用程序的外观，以便轻松找出正在发生的事情。在尝试了其他无法正常工作的方法之后，我想是时候给你一个更广泛的看法，看看它是如何解决这个奇怪的事情。

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

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

$("#p_lt_ctl02_pageplaceholder_p_lt_ctl03_SmartSearchBox1_btnSearch").value = '{%GetResourceString("search")%}';

不知何故，就像我在第一个提出的答案的评论中所说的那样，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>

Answer 2

我一直在编辑错误的文件。只是星期一的事情。

抱歉偷你的时间！

Answer 3

简便方法：我正在制作Angular演示Tour of Heroes，我想将仪表板数据* ngFor分为两列；（像这样）

这是现在对我有用的代码：

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

使Angular * ngFor绘制两个不同的数据列

3 个答案: