Question

嗨，我正在使用angular显示表格。我使用了材质表，以便在加载表时显示微调器，我定义了一个变量 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中，有一个输入字段，键入内容然后按Enter，然后触发 searchTicket（）函数。此函数还可以从 getAllTicket（）函数检索数据。

这时，isLoading已经为false，并且将显示微调框。因此，当触发此 searchTicket（）函数时，如何在此显示微调框？

我试图在searchTicket（）函数中添加isLoading=true，但这无法正常工作。

Answer 1

只需将其设置为true

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

物料表加载时如何显示加载微调器

1 个答案: