fix(module:timeline): when the data clear. reset items (#7109)

NG-ZORRO · Dec 16, 2021 · 0ece612 · 0ece612
1 parent fe9070a
commit 0ece612
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/components/timeline/timeline.component.ts b/components/timeline/timeline.component.ts
@@ -151,6 +151,9 @@ export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestr
 
       this.timelineItems = this.nzReverse ? this.listOfItems.toArray().reverse() : this.listOfItems.toArray();
       this.hasLabelItem = hasLabelItem;
+    } else {
+      this.timelineItems = [];
+      this.hasLabelItem = false;
     }
 
     this.cdr.markForCheck();

diff --git a/components/timeline/timeline.spec.ts b/components/timeline/timeline.spec.ts
@@ -245,6 +245,27 @@ describe('nz-timeline', () => {
       expect(timeline.nativeElement.firstElementChild!.classList).not.toContain('ant-timeline-rtl');
     });
   });
+
+  describe('clear', () => {
+    let testBed: ComponentBed<NzTestTimelineClearItemsComponent>;
+    let fixture: ComponentFixture<NzTestTimelineClearItemsComponent>;
+    let timeline: NzTimelineComponent;
+
+    beforeEach(() => {
+      testBed = createComponentBed(NzTestTimelineClearItemsComponent, {
+        imports: [NzTimelineModule]
+      });
+      fixture = testBed.fixture;
+      fixture.detectChanges();
+      timeline = fixture.componentInstance.nzTimeLine;
+    });
+
+    it('test clear items', () => {
+      fixture.componentInstance.reset();
+      fixture.detectChanges();
+      expect(timeline.timelineItems.length).toBe(0);
+    });
+  });
 });
 
 @Component({
@@ -314,3 +335,20 @@ export class NzTestTimelineRtlComponent {
   @ViewChild(Dir) dir!: Dir;
   direction = 'rtl';
 }
+
+@Component({
+  template: `
+    <nz-timeline nzMode="custom">
+      <nz-timeline-item *ngFor="let item of data">{{ item }}</nz-timeline-item>
+    </nz-timeline>
+    <span (click)="reset()">reset</span>
+  `
+})
+export class NzTestTimelineClearItemsComponent {
+  @ViewChild(NzTimelineComponent)
+  nzTimeLine!: NzTimelineComponent;
+  data = [1, 2, 3];
+  reset(): void {
+    this.data = [];
+  }
+}