fix(module: list): fix the bug that synchrone action item are not displayed in the item (#7958)

* fix(module:list): load asynchrone-list-action

* fix(module:list): wrong import

* fix(module:list): wrong import

Author: Nicoss54

components/list/list-item-cell.ts

@@ -16,9 +16,10 @@ import {
   ViewChild
 } from '@angular/core';
 import { defer, merge, MonoTypeOperatorFunction, Observable, of, Subject } from 'rxjs';
-import { switchMap, take, takeUntil } from 'rxjs/operators';
+import { exhaustMap, startWith, take, takeUntil } from 'rxjs/operators';
 
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 @Component({
   selector: 'nz-list-item-extra, [nz-list-item-extra]',
@@ -62,14 +63,14 @@ export class NzListItemActionsComponent implements OnChanges {
 
   actions: Array<TemplateRef<void>> = [];
   private inputActionChanges$ = new Subject<null>();
-  private contentChildrenChanges$: Observable<null> = defer(() => {
+  private contentChildrenChanges$: Observable<NzSafeAny> = defer(() => {
     if (this.nzListItemActions) {
       return of(null);
     }
     return this.ngZone.onStable.pipe(
       take(1),
       this.enterZone(),
-      switchMap(() => this.contentChildrenChanges$)
+      exhaustMap(() => this.nzListItemActions.changes.pipe(startWith(this.nzListItemActions)))
     );
   });
 

components/list/list.spec.ts

@@ -1,7 +1,9 @@
 import { BidiModule, Dir } from '@angular/cdk/bidi';
 import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { Observable, timer } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
@@ -163,6 +165,11 @@ describe('list', () => {
       expect(dl.query(By.css('.ant-list-item-main')) != null).toBe(true);
       expect(dl.query(By.css('.ant-list-item-extra')) != null).toBe(true);
     });
+    it('should display the asynchronous action', fakeAsync(() => {
+      tick(2000);
+      fixture.detectChanges();
+      expect(dl.query(By.css('.ant-list-item-action')) != null).toBe(true);
+    }));
   });
 
   describe('item', () => {
@@ -259,6 +266,9 @@ describe('list RTL', () => {
             nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
             nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team"
           ></nz-list-item-meta>
+          <ul nz-list-item-actions>
+            <nz-list-item-action *ngFor="let action of actions$ | async">{{ action }}</nz-list-item-action>
+          </ul>
         </nz-list-item>
       </ng-template>
       <ng-template #loadMore>
@@ -290,6 +300,7 @@ class TestListComponent {
   ];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   nzGrid: any = { gutter: 16, span: 12 };
+  actions$: Observable<string[]> = timer(500).pipe(map(() => ['Edit', 'Delete']));
 }
 
 @Component({