角度4承诺服务

Question

I have created a service to use some datas. IT works perfectly. The problem is that I would like to apply a pipe on these datas in my hTML template to sort them. here is my component

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();

    }

}

here is my pipe

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;
            });
        }
    }
}

and here is my tempalte html

<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>

My error message is that sort can be applied on undefined ...As if my t_aliments was not existing.... But it exists If I can use it without the pipe...

Answer 1

可以，我直接对数据服务进行了排序...