Question

我想使用div作为容器。在该容器中，我希望使用*ngFor或*ngRepeat填充最多3个元素。达到该限制后，我希望生成父div的新实例以继续填充数据。

到目前为止，我已尝试过这个

<!-- I want to create a new instance of this once 3 elements are generated in it -->
<div *ngFor="let link of homeIntroData?.links; let i=index;" class="">

    <!-- This is what I want to generate up to 3 times before a new container is generated -->  
    <div *ngIf="i<3" class="" >
        <div class="card">
            <p class="" routerLink="" routerLinkActivate="">
                {{link.link}}
            </p>
        </div>
    </div>

我遇到过这个 Angular 2: how to apply limit to *ngFor?

我认为原来是答案，但它只是将元素限制为3个条目，而且它适用于整个容器而不是它内部的元素。我希望它们在3行中水平跨越屏幕，而不是所有行中的1行。

到目前为止，我发现我必须将*ngFor和*ngIf编码移到像这样的子元素

<div class="">

    <div *ngFor="let link of homeIntroData?.links; let i=index;" class="">
        <div *ngIf="i<3"  class="card">
            <p class="" [routerLink]="" routerLinkActivate="">
                {{link.link}}
            </p>
        </div>
    </div>

</div>

这样可以让它像我想要的那样连续排成一行，但我无法理解如何告诉Angular创建一个新的父实例并继续填充它。

到目前为止，我遇到了这个用于分页的https://github.com/michaelbromley/ng2-pagination，但它基本上做了我想要它以某种方式做的事情。我想我基本上不得不告诉它同时显示2页。我读的越多，我就越想弄清楚如何使用它，就像我需要使用它一样。

到目前为止，我认为我需要创建一个自定义管道来绑定到父*ngIf中的div，以告诉它做了我想要它做的事情有3个子元素。在我踏上这段旅程之前，我想知道是否有任何可能的方法可以使用开箱即用的Angular 2。如果没有，我怎么能实现这个目标？提前谢谢。

更新

yurzui在评论中发布的关于我需要做的事情，你可以在这里查看https://plnkr.co/edit/q9olLVsEcGrskv8oQkV7?p=preview。我开始将它应用到我的网站上并遇到了一些问题。

对于初学者，我使用firebase作为我的数据库与angularfire2。这意味着我有一个巨大的对象与其他大对象，其中一些对象实际上是相同类型数据的数组。因此，我使绑定正常工作的唯一方法就是这样。

<div *ngFor="let link of homeIntroData$?.links" class="row home_link_container">

    <div *ngFor="let link of pipe" class="col-4">
        <div class="card">
            <p class="home_link" [routerLink]="'/home/'+link.val" routerLinkActivate="active">
                {{link.link}}
            </p>
        </div>
    </div>

</div>

我不能说

<div *ngFor="links of homeIntroData$">

因为homeIntroData$本身并不是一个数组。在羽毛球的地方＆＃34;伟大的Yurzui＆＃34;炮制它像这样设置

<div *ngFor="let chunk of items | chunks: 3" class="row">

    <div *ngFor="let item of chunk" class="card">
        <p>
            {{item}}
        </p>
    </div>

</div>

我还没有开始深入研究如何让管道工作，因为我仍然坚持如何以一种允许我应用它的方式获取数据。这里重要的是能够将links加载到父元素中，限制为3个孩子，然后是一个孩子，每个父母加载link 3次，就像在plunker中一样。

我遇到了这篇文章https://github.com/angular/angular/issues/6392，其中讨论了数据不是数组的问题，并建议将数据分解为我们可以直接链接的数据块。所以我像这样修改了我的组件的类

export class HomeIntroComponent implements OnInit {

    private homeIntroData$: FirebaseObjectObservable<any>;

    //added this to call in the template
    private homeIntroLinks$:    FirebaseListObservable<any>;

    constructor(private _homeService: HomeService) {}

    ngOnInit() {
        this._homeService.getHomeIntroData().subscribe(HomeIntroData =>{
            this.homeIntroData$ = HomeIntroData;

            //used the same class from the service to go directly to links
            this.homeIntroLinks$ = HomeIntroData.links;
            console.log(this.homeIntroLinks$);
        });
    }

}

看到我必须在绑定中使用{{link.link}}来显示所有内容我认为我可以让像这样的子元素一起使用

<div *ngFor="let link of link" class="col-4">
    <div class="card">
        <p class="home_link" [routerLink]="'/home/'+link.val" routerLinkActivate="active">
            {{link}}
        </p>
    </div>
</div>

但当然我再次收到有关[object object]的错误消息。所以我真的无法弄清楚如何调用我的数据来处理这个问题。 JSON的导出homeIntroData为

"home_intro" : {
    "links" : [ {
        "link" : "I need to expand my current brand.",
        "val" : "expand"
      }, {
        "link" : "I need to re-create my Brand.",
        "val" : "recreate"
      }, {
        "link" : "I need to build a Brand for my new Business.",
        "val" : "new-business"
      }, {
        "link" : "I need to build a Brand for my new product.",
        "val" : "new-product"
      }, {
        "link" : "I have a technical difficulty that requires an Artist.",
        "val" : "tech-difficulty"
      } ]
    }

另一件事是，如果你看看你是否会看到Yurzui将chunk添加到绑定中

<div *ngFor="let chunk of items | chunks: 3" class="row">
    <div *ngFor="let item of chunk" class="card">
      <p>
        {{item}}
       </p>
    </div>
  </div>

如果您查看app.ts文件的其余部分，您会发现它未在任何地方定义。管道中有chunks，chunkSize中有PipeTransform，但不是chunk。我甚至玩过它，把它的名字变成了一个完全不同的东西，它与任何方式的块都没有任何关系，它仍然工作!!!为什么？，怎么样？

是否可以使用* ngFor来填充多个父元素？

0 个答案: