1

我想使用 adiv作为容器。在该容器中，我想用*ngForor填充最多 3 个元素*ngRepeat。达到该限制后，我希望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：如何对 *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 来做到这一点。如果没有，我怎样才能做到这一点？提前致谢。

更新

评论中发布的 plunkeryurzui正是我需要做的，您可以在此处查看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$它本身不是一个数组。“伟大的Yurzui”在plunker的哪里炮制它是这样设置的

<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像在 plunker 中那样加载每个父元素 3 次的子元素。

我遇到了这篇文章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"
      } ]
    }

另一件事是，如果您查看 plunker，您会看到 Yurzuichunk像这样添加到绑定中

<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。我什至玩弄了它，把它的名字改成了完全不同的东西，与一个块没有任何关系，它仍然有效！！！。为什么？，怎么做？

4

0 回答 0