制作一个角度* ngFor绘制两个不同的数据列 [英] Make an Angular *ngFor draw two different columns of data

问题描述

我正在尝试使用* ngFor指令将数据分为两列，而不是通常的一列.我什至遵循了我在那边看到的一个示例，但是它根本没有用.让我们从图形部分开始:

I'm trying to make a *ngFor directive to put data in two columns, instead of just one column as usual. I even followed an example I saw over there, but it didn't work at all. Let's start with the graphic part:

我有这个:

...但是我希望它看起来像这样(因此我可以在不增大卡片的情况下容纳比以前更多的物品):

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

这是我当前拥有的代码，它绝对不执行任何操作(仅显示第一张图片):

This is the code I currently have, which does absolutely nothing (it just shows the first image):

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

I know it wouldn't be needed in this example, but it was just a try. I'm quite confused why this is not working at all. Inside the created divs, the bootstrap classes (col-md-6) are not being applied at all.

为什么会这样?

让我稍微扩展一下应用程序的外观，以便轻松了解正在发生的事情.在尝试了其他并非真正有效的方法之后，我想是时候让您更全面地了解这种情况了，以找出如何解决此怪异问题的方法.

Let me expand a little how the app looks like so it's easy to find out what's going on. After trying other methods that didn't really work, I guess it's time to give you a wider view of what this looks like in order to find out how to fix this weird thing.

父组件使用卡片"，就像您在本文中上部看到的那样.因此，主模板如下所示:

The parent component uses "cards" like the one you see upper in this post. So, the main template looks like this:

"cards"组件具有ng-content，它在我提供的另一个组件内部绘制，如您在父组件的实现中所看到的.这是卡片部分:

The "cards" component has a ng-content which draws inside another component that I provide, as you could see in the parent component's implementation. This is the cards component:

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

Somehow, just as I stated in the comments of the first proposed answer, the divs aren't compiling the bootstrap classes as they normally would:

此刻，它变得异常不可思议.任何人都可以发现这里出了什么问题吗?

It's becoming really weird at this moment. Can anyone spot what's wrong here?

推荐答案

问题是每个div具有两个 class 属性，因此Angular仅采用后一类.

The issue is that you have two class attributes for each div, so Angular is taking the later class only.

只需合并class属性，如:

Simply merge the class attribute like:

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

这两个类都将被应用.

您实际上可以使用更少的html并按如下方式使用 ngClass

You can actually use less html and use ngClass as follows

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

这篇关于制作一个角度* ngFor绘制两个不同的数据列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！