每当材料表加载时如何显示加载微调器[重复]

Question

您好，我正在使用角度来显示表格。我使用了材质表，为了在加载表时显示微调器，我定义了一个变量 isLoading。它是这样工作的： 在 ts 文件中：

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{

  dataSource = new MatTableDataSource<Ticket>();
  isLoading = true;


  constructor(private ticket: TicketService,

  ngOnInit() {
    this.getAllTicket();

  }


  getAllTicket() {
    this.ticket.getAllTicket(queryParams).then((res: Ticket[]) => {
      this.isLoading = false;
      this.ticketList = res;
      this.originalTicketList = this.ticketList;
      this.dataSource.data = this.ticketList;
    });
  }

  searchTicket() {
    this.getAllTicket();
  }

}

我的 html 是这样的：

<div id="main-body">
  <div class="search-bar">
      <select [(ngModel)]="searchBy" class="border-primary">
        <option value="">-- choose an option--</option>
        <option value="id">SIR ID</option>
      </select>
        <!--   here is the input i type and hit enter to trigger searchTicket() function -->
      <input type="text" class="form-control card border-primary ele fnt"
        placeholder="Enter the SIR ID or Host or sha256 or User ID" aria-label="Ticket Id"
        aria-describedby="button-addon2" [(ngModel)]="currentTicketId" (keyup.enter) = "searchTicket()">
    </div>
  </div>

  <div class="ticket-result">
    <div class="ticket-container">
      <table mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8">
          <!--   my table column definition here -->
      </table>
      <mat-card *ngIf="isLoading" class="mat-card-style">
        <mat-progress-spinner color="primary" mode="indeterminate">
        </mat-progress-spinner>
      </mat-card>
    </div>
  </div>
</div>

所以我定义了一个 isLoading 变量，当加载数据时，会显示加载微调器。但这仅在我加载页面时发生。在我的 html 中有一个输入字段，输入一些内容并按回车，然后触发 searchTicket() 函数。此函数还用于从 getAllTicket() 函数中检索数据。

此时 isLoading 已经为 false 并且会显示微调器。那么Here如何让spinner在触发这个searchTicket()函数时也显示出来呢？

我尝试在 searchTicket() 函数中添加isLoading=true，但这不起作用。

Answer 1

只需将其设置回true

searchTicket() {
  this.isLoading = true;
  this.getAllTicket();
}