在Angular 12中，带有异步功能的Mat-Spinner没有像我期望的那样使用rxjs函数完成

在Angular 12中，Mat-Spinner是一个用于显示加载状态的组件，它可以与异步功能结合使用。通常情况下，我们可以使用rxjs函数来管理异步操作，但是在Mat-Spinner中，并没有直接使用rxjs函数来完成这个功能。

Mat-Spinner组件的使用方式如下：

1. 首先，确保已经导入了MatProgressSpinnerModule模块：

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

1. 在组件的模板中，使用Mat-Spinner组件来显示加载状态：

<mat-spinner></mat-spinner>

1. 如果需要在异步操作期间显示加载状态，可以通过设置ngIf指令来控制Mat-Spinner的显示与隐藏：

<mat-spinner *ngIf="isLoading"></mat-spinner>

在上述代码中，isLoading是一个布尔类型的变量，用于控制Mat-Spinner的显示与隐藏。当isLoading为true时，Mat-Spinner会显示出来，表示正在加载；当isLoading为false时，Mat-Spinner会隐藏起来。

需要注意的是，Mat-Spinner并没有直接使用rxjs函数来管理异步操作。如果你希望在异步操作中使用rxjs函数，可以在组件中手动引入rxjs库，并使用Observable对象来管理异步操作。以下是一个示例：

1. 首先，确保已经导入了rxjs库：

import { Observable } from 'rxjs';

1. 在组件中定义一个Observable对象，用于管理异步操作：

isLoading$: Observable<boolean>;

1. 在组件的构造函数中，初始化isLoading$对象，并在异步操作开始和结束时更新isLoading$的值：

constructor() {
  this.isLoading$ = new Observable<boolean>((observer) => {
    // 异步操作开始时，设置isLoading$为true
    observer.next(true);

    // 执行异步操作
    // ...

    // 异步操作结束时，设置isLoading$为false
    observer.next(false);
    observer.complete();
  });
}

1. 在组件的模板中，使用async管道来订阅isLoading$对象，并根据其值来显示或隐藏Mat-Spinner：

<mat-spinner *ngIf="isLoading$ | async"></mat-spinner>

在上述代码中，isLoading$对象通过Observable的next方法来更新值，并通过async管道来订阅isLoading$对象的最新值。当isLoading$为true时，Mat-Spinner会显示出来，表示正在加载；当isLoading$为false时，Mat-Spinner会隐藏起来。

需要注意的是，以上示例中的异步操作部分需要根据具体情况进行实现，这里只是一个简单的示例。另外，如果需要更复杂的异步操作管理，可以使用rxjs提供的操作符和方法来处理。

关于Mat-Spinner的更多信息和使用示例，你可以参考腾讯云的官方文档：

Mat-Spinner - 腾讯云官方文档