Question

我想创建一个管道，当它在输入字段中写入它搜索表时，表已经用循环（* ngFor）创建了，我为输入创建了一个局部变量（#SearchedText）并添加了（keyup ）=“0”当我在学习时它的工作方式如下：

 return game.filter( game =>

 (game.name.toLowerCase().includes(typed)) ||

 (game.category.toLowerCase().includes(typed)) ||

 (game.price.toLowerCase().includes(typed)) ||

 (game.quantity.toLowerCase().includes(typed)) ||

 (game.production.toLowerCase().includes(typed)) ||

 (game.description.toLowerCase().includes(typed))

 );

然而，现在json来自服务器我无法使用它，来自服务器的console.log：

Object

看起来管道正在出现一个数组，所以我无法处理它。

游戏-listing.component.html

<div class="col-md-12">
    <div class="row bar">
        <div class="col-md-12">
            <form>
                <div class="input-group">
                    <span class="input-group-btn">
                        <a [routerLink]="['/cadastrar', 'jogos']" class="btn btn-primary">
                            Novo Jogo
                        </a>
                    </span>
                    <input #SearchedText (keyup)="0" class="form-control" placeholder="Procurar jogo">
                </div>
            </form>
        </div>
  </div>
  <div class="row">
      <table class="table table-striped">
          <thead>
              <tr>
                  <th>Capa</th>
                  <th>Nome</th>
                  <th>Categoria</th>
                  <th>Plataformas</th>
                  <th>Preço</th>
                  <th>Quantidade</th>
                  <th>Em Produção</th>
                  <th>Descrição</th>
                  <th>Editar</th>
                  <th>Excluir</th>
              </tr>
          </thead>
          <tbody>
              <tr *ngFor="let game of games">
                  <td><img src="{{game.imageFullPath}}" width="150" height="150" /></td>
                  <td>{{game.name}}</td>
                  <td>{{game.category}}</td>
                  <td>{{game.platforms | separator}}</td>
                  <td>{{game.price}}</td>
                  <td>{{game.quantity}}</td>
                  <td>{{game.production ? 'Sim' : 'Não'}}</td>
                  <td>{{game.description}}</td>
                  <td><i class="fa fa-pencil icon" aria-hidden="true" (click)="edit(game)"></i></td>
                  <td><i class="fa fa-times icon" aria-hidden="true" (click)="delete(game.id)"></i></td>
              </tr>
          </tbody>
      </table>
  </div>
</div>

游戏-listing.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'app-games-listing',
    templateUrl: './games-listing.component.html',
    styleUrls: [ './games-listing.component.css', '../styles.css' ]
})
export class GamesListingComponent{

    games: Object[] = [];

    /*

    delete(id:number){

        this.http.delete('http://localhost:80/lightning/server/index.php/test', JSON.stringify(id))
        .map(res => res).subscribe(games => console.log(games));

    }

    edit(form){

        this.http.post('http://localhost:80/lightning/server/index.php/test', JSON.stringify(form.value))
        .map(res => res).subscribe(games => console.log(games));

    }

    */

    constructor(private http: Http){

        http.get('http://localhost:8080/lightning/api/game')
        .map(res => res.json()).subscribe(games => {

            this.games = games;

            console.log(this.games);

        }), erro => console.log(erro);

    }

}

角度2管道屏幕搜索

0 个答案: