fix(module:timeline): when the data clear, reset items

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();

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 = [];
+  }
+}