Можно ли использовать *ngFor для заполнения нескольких родительских элементов?

Question

Я хочу использовать div как контейнер. В этом контейнере я хотел бы заполнить до 3 элементов *ngFor или же *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, а не по 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 из коробки. Если нет, как я могу этого достичь? Заранее спасибо.

ОБНОВИТЬ

Plunker размещен 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$ Сам по себе не массив. Где в плунжере "Великий Юрзуй" придуман, он настроен так

<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 раза на одного родителя, как в вантузе.

Я наткнулся на этот пост 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"
      } ]
    }

Другое дело, если вы посмотрите в плункер, вы увидите, что Юрзуй добавил 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, Я даже поиграл с этим и изменил его название на что-то совершенно другое, что никак не имело никакого отношения к чанку, и это ВСЕ ЕЩЕ РАБОТАЛО!!! Почему как?