0
일부 데이터를 사용하는 서비스를 만들었습니다. 완벽하게 작동합니다. 문제는 hTML 템플릿에서 이러한 데이터에 파이프를 적용하여 정렬하는 것입니다. 여기 내 구성 요소각도 4 약속 서비스
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {AlimentsService} from '../services/aliments.service';
import {AlimentsModel} from '../datas/aliments-model';
@Component({
selector: 'app-liste',
templateUrl: './liste.component.html',
styleUrls: ['./liste.component.css'],
providers: [AlimentsService]
})
export class ListeComponent implements OnInit {
t_aliments: AlimentsModel[];
aliments:AlimentsModel;
constructor(private alimentservice: AlimentsService) {
}
getAliments():void{
//on utilise une promise pour obtenir tous les aliments si on les obtiens on les passent en parametre d'une fonction qui les affecera à notre t_aliments
this.alimentservice.getAliments().then(t_aliments => this.t_aliments=t_aliments);
console.log(this.t_aliments);
}
ngOnInit(): void {
this.getAliments();
}
}
것은 여기 내 파이프
여기import {Pipe, PipeTransform} from '@angular/core';
import {AlimentsModel} from '../datas/aliments-model';
@Pipe ({
name:'sort_aliments'
})
export class AlimentsSortPipe implements PipeTransform {
transform(value:AlimentsModel[], args:string):any{
if (args==='ascending')
{
value.sort(function(a,b){
var nameA = a.nom.toUpperCase(); // ignore upper and lowercase
var nameB = b.nom.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
}
else if(args==="descending")
{
value.sort(function(a,b)
{
var nameA = a.nom.toUpperCase(); // ignore upper and lowercase
var nameB = b.nom.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return 1;
}
if (nameA > nameB) {
return -1;
}
// names must be equal
return 0;
});
}
}
}
및
<div *ngFor="let aliment of t_aliments | sort_aliments:'ascending'" class="list-group">
<a href="#" class="list-group-item ">
{{aliment.nom}} <br>{{aliment.quantite}}
</a>
</div>
내 오류 메시지가 그런 종류는 정의에 적용 할 수있는 내 tempalte의 HTML입니다 ... 마치 내 t_aliments가 존재하지 않는 것처럼 ....하지만 파이프없이 사용할 수 있다면 존재합니다 ...