【发布时间】：2019-10-19 10:35:27
【问题描述】：
我正在尝试使用 ngfor 和 ngif 制作三个标签。 它实际上可以工作，但存在性能问题 看代码
<mat-nav-list class="op-content">
<h5>Listar Usuários</h5>
<input matInput [(ngModel)]="searchText" placeholder="Filtrar por nome" class="filter-input">
<mat-tab-group>
<mat-tab label="Todos" [(ngModel)]="searchText" name="todos" ngDefaultControl>
<ng-container *ngFor="let op of tboperadores | filter : searchText">
<mat-list-item>
<a matLine [routerLink]="['/operadores', op.id_operador]">
<span class="badge badge-primary"> {{op.id_operador}}</span>
Nome: {{ op.nome }} CPF: {{ op.identificacao }}</a>
</mat-list-item>
</ng-container>
</mat-tab>
<mat-tab label="Habilitados" [(ngModel)]="searchText" name="habilitado" ngDefaultControl>
<ng-container *ngFor="let op of tboperadores | filter : searchText">
<ng-container *ngIf="op.habilitado =='S'">
<mat-list-item>
<a matLine [routerLink]="['/operadores', op.id_operador]">
<span class="badge badge-primary"> {{op.id_operador}}</span>
Nome: {{ op.nome }} CPF: {{ op.identificacao }}</a>
</mat-list-item>
</ng-container>
</ng-container>
</mat-tab>
<mat-tab label="Desabilitados" [(ngModel)]="searchText" name="desabilitado" ngDefaultControl>
<ng-container *ngFor="let op of tboperadores | filter : searchText">
<ng-container *ngIf="op.habilitado=='N'">
<mat-list-item>
<a matLine [routerLink]="['/operadores', op.id_operador]">
<span class="badge badge-primary"> {{op.id_operador}}</span>
Nome: {{ op.nome }} CPF: {{ op.identificacao }}</a>
</mat-list-item>
</ng-container>
</ng-container>
</mat-tab>
</mat-tab-group>
</mat-nav-list>
<div class="loader" *ngIf="!subscription?.closed" #loading>
</div>
如您所见，每次打开新标签时，我都有一个 ngfor。 我试着只为整个页面放一个， 但我无法让它工作。
有人知道如何解决它？
编辑：
我的operador.component.ts
import { Component, OnInit, } from '@angular/core';
import { Operador } from './operador';
import { OperadorService } from './operador.service';
import { Subscription, Observable } from 'rxjs';
@Component({
selector: 'app-operador',
templateUrl: './operador.component.html',
styleUrls: ['./operador.component.css']
})
//export class OperadorComponent implements OnInit, PipeTransform {
export class OperadorComponent implements OnInit {
tboperadores: Operador[];
checkedOperadors: Operador[];
subscription: Subscription;
mode = 'indeterminate';
constructor(private operadorService: OperadorService) {
}
ngOnInit(): void {
this.subscription = this.getOperadores();
}
getOperadores() {
return this.operadorService.getOperadores()
.subscribe(ob => {
console.log(ob);
this.tboperadores = ob;
});
}
}
还有，我的 filter.pipe.ts：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if(!items) return [];
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
return it.nome.toLowerCase().includes(searchText);
});
}
}
- 我的operador.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Operador } from './operador';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({
providedIn: 'root'
})
export class OperadorService {
private operadoresUrl = '******'; // URL to web api
constructor(
private http: HttpClient
) { }
getOperadores (): Observable<Operador[]> {
return this.http.get<Operador[]>(this.operadoresUrl)
}
getOperador(id_operador: number): Observable<Operador> {
const url = `${this.operadoresUrl}/${id_operador}`;
return this.http.get<Operador>(url);
}
addOperador (operador: Operador): Observable<Operador> {
return this.http.post<Operador>(this.operadoresUrl, operador, httpOptions);
}
deleteOperador (operador: Operador | number): Observable<Operador> {
const id_operador = typeof operador === 'number' ? operador : operador.id_operador;
const url = `${this.operadoresUrl}/${id_operador}`;
return this.http.delete<Operador>(url, httpOptions);
}
updateOperador (operador: Operador): Observable<any> {
return this.http.put(this.operadoresUrl, operador, httpOptions);
}
}
EDIT2：
我已经编辑了这个方法来做过滤器：
getOperadores(option): Observable<Operador[]> {
if (option == 0) {
return this.http.get<Operador[]>(this.operadoresUrl)
} else if (option == 1) {
return this.http.get<Operador[]>(this.operadoresUrl).pipe(
map((reports: Operador[]) => reports.filter(p => p.habilitado === "S"))
);
} else {
return this.http.get<Operador[]>(this.operadoresUrl).pipe(
map((reports: Operador[]) => reports.filter(p => p.habilitado === "N"))
);
}
}
并创建了这两个方法在构造函数中调用：
checkedOperadores() {
return this.operadorService.getOperadores(1)
.subscribe( ob => {
console.log(ob);
this.checkedOperadors = ob;
});
}
uncheckedOperadores() {
return this.operadorService.getOperadores(2)
.subscribe( ob => {
console.log(ob);
this.uncheckedOperadors = ob;
});
}
但性能问题仍在继续......
【问题讨论】：
-
你为什么在每个标签上重复 [(ngModel)]="searchText" ？我从未使用过 Angular Material，但它对我来说很奇怪
-
我已经在下面更新了我的答案，你可以添加你的过滤管的代码吗？
-
我已经更新了我的课程，感谢您的帮助！
-
你试过延迟加载吗？
-
是的，但是使用延迟加载单独加载页面并不能解决我的问题。我想更快地看到标签的内容......页面加载不是问题。
标签： angular typescript ngfor