我将我的角度项目用于 ant design ng zorro loding spin ,当我将我的角度页面添加到加载旋转(始终加载)时,任何人都知道如何正确添加此加载< / p>
谢谢
在此处编码
<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;
}
}
答案 0 :(得分:2)
由于“ loading”为true,所以显示了加载微调器。在哪里将其设置为false?
在Angular中,您可以创建一个流来加载数据,并使用模板中的异步管道来加载数据。使用ng-template,您可以显示加载微调器
<ng-template #loadingSpinner><nz-spin nzSimple></nz-spin></ng-template>
<div *ngIf="myStream | async as myData; else loadingSpinner> ... table ...</div>