带有 Angular 5 的 Kendo UI 动态拆分器窗格

Question

有关这方面的最新更新，请参阅下面的最后一个代码段。外部都像带有 ng-container 的 ng-template 一样被处理，但是 content-pane 永远不会进入页面。

我正在尝试在 Angular 55 中实现具有动态分配的窗格数量的 Kendo 拆分器窗格。我在父组件中有该元素，但除非我删除它，否则子组件不会被渲染。

父拆分器组件

import { Component, OnInit } from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';

@Component({
  selector: 'app-all-deltas',
  template: `<kendo-splitter orientation="vertical" style="height: 340px;">

              <app-brx-delta *ngFor="let b of brxDeltas" [brxDelta]="b"></app-brx-delta>

            </kendo-splitter>`,
  styleUrls: ['all-deltas.component.scss']
})
export class AllDeltasComponent implements OnInit {

  brxDeltas: BrxDelta[];

  constructor() {
    this.brxDeltas = [
      new BrxDelta("DELTA1"),
      new BrxDelta("DELTA2")
    ];
  }

  ngOnInit() {
    console.log("BrxTableListComponent init");
    console.log( this.brxDeltas );
  }

}

子窗格组件

import { Component, OnInit, Input} from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';

@Component({
  selector: 'app-brx-delta',
  template: `<kendo-splitter-pane size="100px">
                <div class="pane-content">
                  <h3>{{brxDelta.deltaName}}</h3>
                </div>
              </kendo-splitter-pane>
              `,
  styleUrls: ['brx-delta.component.scss']
})
export class BrxDeltaComponent implements OnInit {

  @Input('brxDelta') brxDelta:BrxDelta;

  ngOnInit() {
    console.log( this.brxDelta );
  }

}

最新更新...

import { Component, OnInit } from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';
import { ChangeDetectorRef } from '@angular/core';


@Component({
  selector: 'app-all-deltas',
  // templateUrl: 'all-deltas.component.html',
  template:`<kendo-splitter orientation="horizontal" style="height: 340px;">

              <ng-template ngFor let-brxDelta [ngForOf]="brxDeltas" let-i="index">

                <kendo-splitter-pane [collapsible]="true" [resizable]="true">
                  <h3>{{brxDelta.deltaName}}</h3>
                  <ng-container *ngTemplateOutlet="deltaPane; context:brxDelta"></ng-container>
                </kendo-splitter-pane>

              </ng-template>

            </kendo-splitter>

            <ng-template #deltaPane>

                <div class="pane-content">
                  <h3>{{deltaName}}</h3>
                </div>

            </ng-template>`
  styleUrls: ['all-deltas.component.scss']
})
export class AllDeltasComponent implements OnInit {

  brxDeltas: BrxDelta[];

  constructor(private cdRef:ChangeDetectorRef) {
    this.brxDeltas = [
      new BrxDelta("DELTA1"),
      new BrxDelta("DELTA2"),
      new BrxDelta("DELTA3")
    ];
  }

  ngOnInit() {
    console.log("BrxTableListComponent init");
    console.log( this.brxDeltas );
  }


  ngAfterViewChecked()
  {
    console.log( "! Detect changes !" );
    this.cdRef.detectChanges();
  }
}

Answer 1

你读过炼金术士吗？你知道最后他回到他开始的地方并找到了他正在寻找的东西吗？是的，这不是那样的。只有在翻阅文档的大量示例之后，我才能最终偶然发现答案。虽然教了我一点。

import { Component, OnInit } from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';
import { ChangeDetectorRef } from '@angular/core';


@Component({
  selector: 'app-all-deltas',
  // templateUrl: 'all-deltas.component.html',
  template:`<kendo-splitter orientation="horizontal" style="height: 340px;">

                <kendo-splitter-pane [collapsible]="true" [resizable]="true"
                        *ngFor="let brxDelta of brxDeltas; let i=index; trackBy: trackById">
                <div class="pane-content">
                  <h3>{{brxDelta.deltaName}}</h3>
                </div>
                </kendo-splitter-pane>

            </kendo-splitter>`,
  styleUrls: ['all-deltas.component.scss']
})
export class AllDeltasComponent implements OnInit {

  brxDeltas: BrxDelta[];

    constructor(private cdRef:ChangeDetectorRef) {
    this.brxDeltas = [
      new BrxDelta("DELTA1"),
      new BrxDelta("DELTA2"),
      new BrxDelta("DELTA3")
    ];
  }

  ngOnInit() {
    console.log("BrxTableListComponent init");
    console.log( this.brxDeltas );
  }

  ngAfterViewChecked()
  {
    console.log( "! Detect changes !" );
    this.cdRef.detectChanges();
  }
}