*ngFor 来自不同变量的值
*ngFor values from different variables
我需要在 ngFor 值中显示而不是在另一个变量中,我不知道这是否可能,
现在我有了这个
组件
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ListarAfiliacaoService } from '../services/listar.afiliacao.service';
import { MatDialog } from '@angular/material/dialog';
import { ListarImovelService } from '../services/listar.imovel.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-afiliacao',
templateUrl: './afiliacao.component.html',
styleUrls: ['./afiliacao.component.css']
})
export class AfiliacaoComponent implements OnInit, OnDestroy {
constructor(private listAffiliationService: ListarAfiliacaoService, public dialog: MatDialog) { }
affiliation$: Observable<any>;
affiliationPending$: Observable<any>;
afiliationDenied: any;
accessCount: any;
ngOnInit(): void {
this.affiliation$ = this.listAffiliationService.listAffiliation();
this.affiliationPending$ = this.listAffiliationService.listAffiliationPending();
this.listAffiliationDenied();
}
countAccess(refValue) {
this.listAffiliationService.countAccess(refValue).subscribe(data => {
this.accessCount = data.length;
}, err => {
console.log(err)
})
}
listAffiliationDenied() {
this.listAffiliationService.listAffiliationDenied().subscribe(data => {
this.afiliationDenied = data;
}, err => {
console.log(err)
})
}
ngOnDestroy(): void {
}
}
服务
import { Injectable } from '@angular/core';
import { HttpClient , HttpHeaders, HttpResponse } from '@angular/common/http';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ListarAfiliacaoService {
constructor(private http: HttpClient, private authService: AuthService) { }
listAffiliation(): Observable<any> {
this.authService.loadToken();
let reqheaders = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.authService.authToken
});
return this.http.get('http://192.168.15.64:4000/afiliacao/'+this.authService.user_id, {headers: reqheaders})
}
listAffiliationPending(): Observable<any> {
this.authService.loadToken();
let reqheaders = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.authService.authToken
});
return this.http.get('http://192.168.15.64:4000/afiliacao/pedido/'+this.authService.user_id, {headers: reqheaders})
}
listAffiliationDenied(): Observable<any> {
this.authService.loadToken();
let reqheaders = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.authService.authToken
});
return this.http.get('http://192.168.15.64:4000/afiliacao/negado/'+this.authService.user_id, {headers: reqheaders})
}
countAccess(ref): Observable<any> {
this.authService.loadToken();
let reqheaders = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.authService.authToken
});
return this.http.get('http://localhost:4000/count/'+ref, {headers: reqheaders})
}
}
HTML
<table class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Total access count</th>
<th scope="col">Movel ID</th>
<th scope="col">Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="table-success" *ngFor="let afilia of affiliation$ | async">
<th scope="row">{{afilia.ref}}</th>
<td>{{}}</td>
<td>{{afilia.imovel_Id}}</td>
<td>{{afilia.status}}</td>
<td><mat-icon aria-hidden="false" aria-label="Example home icon">info</mat-icon></td>
</tr>
</tbody>
</table>
我不知道我为这个“总访问计数”做了什么,我创建了函数但无法显示。这个 refValue 是 afilia.ref inside HTML.
我把所有的服务代码和组件
您应该考虑输入变量而不是“任何”。
这样,您最喜欢的 IDE 将帮助您获得现阶段的可用数据。
从您的代码来看,我认为我们至少缺少您服务中的一些功能。您能否给我们更多您的代码,以便我们更好地帮助您?
我认为您可以在模板中使用另一个 async
管道,如下所示:
<tr class="table-success" *ngFor="let afilia of affiliation$ | async">
<th scope="row">{{ afilia.ref }}</th>
<td>{{ countAccess(afilia.ref) | async }}</td>
<td>{{ afilia.imovel_Id }}</td>
<td>{{ afilia.status }}</td>
<td><mat-icon aria-hidden="false" aria-label="Example home icon">info</mat-icon></td>
</tr>
您需要在控制器中修改 countAccess()
如下:
countAccess(refValue) {
return this.listAffiliationService.countAccess(refValue)
.pipe(
map(data => data.length)
);
}
但最好在控制器中构建流。
我需要在 ngFor 值中显示而不是在另一个变量中,我不知道这是否可能,
现在我有了这个
组件
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ListarAfiliacaoService } from '../services/listar.afiliacao.service';
import { MatDialog } from '@angular/material/dialog';
import { ListarImovelService } from '../services/listar.imovel.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-afiliacao',
templateUrl: './afiliacao.component.html',
styleUrls: ['./afiliacao.component.css']
})
export class AfiliacaoComponent implements OnInit, OnDestroy {
constructor(private listAffiliationService: ListarAfiliacaoService, public dialog: MatDialog) { }
affiliation$: Observable<any>;
affiliationPending$: Observable<any>;
afiliationDenied: any;
accessCount: any;
ngOnInit(): void {
this.affiliation$ = this.listAffiliationService.listAffiliation();
this.affiliationPending$ = this.listAffiliationService.listAffiliationPending();
this.listAffiliationDenied();
}
countAccess(refValue) {
this.listAffiliationService.countAccess(refValue).subscribe(data => {
this.accessCount = data.length;
}, err => {
console.log(err)
})
}
listAffiliationDenied() {
this.listAffiliationService.listAffiliationDenied().subscribe(data => {
this.afiliationDenied = data;
}, err => {
console.log(err)
})
}
ngOnDestroy(): void {
}
}
服务
import { Injectable } from '@angular/core';
import { HttpClient , HttpHeaders, HttpResponse } from '@angular/common/http';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ListarAfiliacaoService {
constructor(private http: HttpClient, private authService: AuthService) { }
listAffiliation(): Observable<any> {
this.authService.loadToken();
let reqheaders = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.authService.authToken
});
return this.http.get('http://192.168.15.64:4000/afiliacao/'+this.authService.user_id, {headers: reqheaders})
}
listAffiliationPending(): Observable<any> {
this.authService.loadToken();
let reqheaders = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.authService.authToken
});
return this.http.get('http://192.168.15.64:4000/afiliacao/pedido/'+this.authService.user_id, {headers: reqheaders})
}
listAffiliationDenied(): Observable<any> {
this.authService.loadToken();
let reqheaders = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.authService.authToken
});
return this.http.get('http://192.168.15.64:4000/afiliacao/negado/'+this.authService.user_id, {headers: reqheaders})
}
countAccess(ref): Observable<any> {
this.authService.loadToken();
let reqheaders = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.authService.authToken
});
return this.http.get('http://localhost:4000/count/'+ref, {headers: reqheaders})
}
}
HTML
<table class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Total access count</th>
<th scope="col">Movel ID</th>
<th scope="col">Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="table-success" *ngFor="let afilia of affiliation$ | async">
<th scope="row">{{afilia.ref}}</th>
<td>{{}}</td>
<td>{{afilia.imovel_Id}}</td>
<td>{{afilia.status}}</td>
<td><mat-icon aria-hidden="false" aria-label="Example home icon">info</mat-icon></td>
</tr>
</tbody>
</table>
我不知道我为这个“总访问计数”做了什么,我创建了函数但无法显示。这个 refValue 是 afilia.ref inside HTML.
我把所有的服务代码和组件
您应该考虑输入变量而不是“任何”。 这样,您最喜欢的 IDE 将帮助您获得现阶段的可用数据。
从您的代码来看,我认为我们至少缺少您服务中的一些功能。您能否给我们更多您的代码,以便我们更好地帮助您?
我认为您可以在模板中使用另一个 async
管道,如下所示:
<tr class="table-success" *ngFor="let afilia of affiliation$ | async">
<th scope="row">{{ afilia.ref }}</th>
<td>{{ countAccess(afilia.ref) | async }}</td>
<td>{{ afilia.imovel_Id }}</td>
<td>{{ afilia.status }}</td>
<td><mat-icon aria-hidden="false" aria-label="Example home icon">info</mat-icon></td>
</tr>
您需要在控制器中修改 countAccess()
如下:
countAccess(refValue) {
return this.listAffiliationService.countAccess(refValue)
.pipe(
map(data => data.length)
);
}
但最好在控制器中构建流。