Angular 设置页面加载微调器始终加载

Question

我将我的 angular 项目用于 ant design ng zorro loding spin，当我将我的 angular 页面添加到加载旋转时，它总是加载，任何人都知道如何正确添加此加载

谢谢

代码在这里

<div class="">
    <nz-spin nzSimple *ngIf="loading" ></nz-spin>
  </div>
    
<nz-table #basicTable [nzData]="listOfData">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
          <td>
            <a>Action 一 {{ data.name }}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a>Delete</a>
          </td>
        </tr>
      </tbody>
    </nz-table>


  `,
  styles: [
    `
      .example {
        text-align: center;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        margin-bottom: 20px;
        padding: 30px 50px;
        margin: 20px 0;
      }
    `
  ]
})

.ts

  export class NzDemoSpinInsideComponent {
     loading = true;
    
    
    listOfData: Person[] = [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park'
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park'
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park'
        }
      ];
    
      open(): void {
        this.visible = true;
      }
    
    }

Answer 1

显示加载微调器是因为“正在加载”为真。你在哪里设置为false？

在Angular中，您可以创建一个流来加载数据，并使用模板中的异步管道加载数据。使用 ng-template 你可以显示加载微调器

<ng-template #loadingSpinner><nz-spin nzSimple></nz-spin></ng-template>

<div *ngIf="myStream | async as myData; else loadingSpinner> ... table ...</div>

Angular 设置页面加载微调器始终加载

Angular to set page loading spiner always loading

angular

spinner

antd

ng-zorro-antd