Question

我正在尝试使用角度2制作音乐跟踪器Web应用程序，该应用程序具有以下功能：在ListView中查看所有音乐曲目详细信息添加音乐曲目，包括Title，Genres，Rating等详细信息编辑特定曲目添加流派及其名称可以重命名特定类型我在实现搜索功能以编辑轨道方面遇到了麻烦。我制作了以下文件：

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

我有以下文件来获取流派数据

**TrackModel.ts**


    import {MusicModel} from './MusicModel';
    import 'rxjs/add/operator/filter';
    export class TrackModel{
  id:number;
  title:string;
  rating:number;
  genre:MusicModel[];

}

**GetAllTracks.ts**
import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";
import 'rxjs/Rx';
import {MusicModel} from './MusicModel';
import { Observable } from "rxjs/Rx";
import 'rxjs/add/operator/filter';


@Injectable()
export class GetAllTracksService{
  constructor(private http:Http){}
getAllTracks(){
return this.http.get('http://104.197.128.152:8000/v1/tracks').map((response: Response) => response.json());
}
}

这是app.component.ts文件的内容

**MusicModel.ts**

export class MusicModel{
  id: number;
 name: string;

 constructor(id:number,name:string){
   this.id=id;
   this.name=name;
 }
  }
**GetAllGenre.ts**
import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";
import 'rxjs/Rx';
import {MusicModel} from './MusicModel';
import { Observable } from "rxjs/Rx";
@Injectable()
  export class GetAllGenreService{
  //  baseURL="http://104.197.128.152:8000/v1/genres";
    //tracks=[];
    getAllGenre(){
return this.http.get('http://104.197.128.152:8000/v1/genres').map((response: Response) => response.json());
    }
    constructor(private http:Http){}
}

我已经创建了一个过滤管道，用于实现搜索功能，如下所示：

import { Component,OnInit } from '@angular/core';
import {GetAllGenreService} from '../shared/GetAllGenre.service';
import {GetAllTracksService} from '../shared/GetAllTracks.service';
import {MusicModel} from '../shared/MusicModel';
import {TrackModel} from '../shared/TrackModel'
//import { Pipe, PipeTransform } from '@angular/core';
import {FilterPipe} from './filter.pipe';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})

export class AppComponent implements OnInit{

tracks:TrackModel[]=[];
search:string;
genres:MusicModel[]=[];

constructor(private g:GetAllGenreService,private t: GetAllTracksService){}
ngOnInit(){
  //this.g.getAllGenre().subscribe((data)=>{
    //this.genres=data.results;});
  this.t.getAllTracks().subscribe((data)=>{
    this.tracks=data.results;
    console.log('this.tracks',this.tracks);

  });
}
}

这是app.component.html文件

import { Pipe, PipeTransform } from '@angular/core';
import { AppComponent } from './app.component';
import {TrackModel} from '../shared/trackmodel';
import 'rxjs/add/operator/filter';


@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(values: TrackModel, term?: string): TrackModel {
    //return null;
    if (term=== undefined)
    return values;
    return values.filter(function(value){
      return value.title.toLowerCase().includes(term.toLowerCase());
    });
  }

}

我面临以下问题： 1.我无法使用过滤器错误，过滤器无法应用于类型值。 2.如何在trackmodel中迭代音乐模型，这是预期的输出enter image description here

Answer 1

这是：

transform(values: TrackModel, term?: string): TrackModel {

需要这样：

transform(values: TrackModel[], term?: string): TrackModel {

您是否过滤了数组，而不是单个值？

过滤以在视图中显示所需的项目

1 个答案: