Angular 组件渲染顺序控制 - 按照 HTML 代码顺序显示

这段代码的问题在于：app-piechartofequipments、app-jjdqsb 两个组件先渲染出来，再出现设备状态、在用设备总数等文字信息，你想要按照 HTML 书写顺序从上往下渲染。

要按照 HTML 书写顺序从上往下渲染，可以使用 ngIf 指令来控制组件的显示。通过 ngIf 指令，可以在满足条件时才渲染组件。

首先，你需要在组件中定义一个变量来控制 ngIf 指令的条件。然后，在 HTML 模板中使用 ngIf 指令来判断条件是否满足，从而决定是否渲染组件。

以下是示例代码：

在组件中定义变量：

```typescript showPieChart: boolean = false; showJjdqsb: boolean = false; ```

在模板中使用 ngIf 指令：

```html

全部设备

总数: 123

<nz-card style='width: 50%;' class='panel1' *ngIf='showJjdqsb'>

<h3>接下来，在组件的逻辑中，根据需要的顺序设置变量的值，以控制 ngIf 指令的条件。</h3>
<p>示例代码：</p>
```typescript
ngOnInit() {
    // 先显示全部设备
    this.showPieChart = true;
    // 延时一段时间后显示设备状态
    setTimeout(() => {
        this.showJjdqsb = true;
    }, 1000);
}

在上述示例代码中，ngOnInit() 生命周期钩子函数中，首先将 showPieChart 设置为 true，这样渲染时会显示全部设备的组件。然后使用 setTimeout 函数延时一段时间后，将 showJjdqsb 设置为 true，这样渲染时会显示设备状态的组件。

通过这种方式，你可以控制组件的显示顺序，按照 HTML 书写顺序从上往下进行渲染。