Question

我创建了一个使用某些数据的服务。它非常完美。问题是我想在我的hTML模板中对这些数据应用管道来对它们进行排序。这是我的组件

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

这是我的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>

我的错误信息是可以对未定义应用排序...好像我的t_aliments不存在....但它存在如果我可以在没有管道的情况下使用它...

Answer 1

没关系，我直接对我的数据服务进行了排序......

angulars 4承诺服务

1 个答案: