Фильтрация WordPress API с помощью угловой трубы? - PullRequest
Новая
       8

Фильтрация WordPress API с помощью угловой трубы?

0 голосов
/ 11 сентября 2018

В настоящее время пытаюсь использовать пользовательский канал для фильтрации элементов моего списка * ngFor, чтобы переключать сообщения со статусом комментария: открыто или закрыто.Кажется, наткнулся на препятствие при настройке.

Код выглядит следующим образом:

app.component.html 

  <select (change)="onChange($event.target.value)">
    <option value="all" selected="selected">All</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

  <ul>
    <li *ngFor="let post of posts | myPipe:commentStatus">
      <h1>{{ post.title.rendered }}</h1>
      comment status: {{ post.comment_status }}
    </li>
  </ul>

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'rest-ang';

  posts = [];

  wpUrl = 'http://wprest.local/wp-json/wp/v2/posts';

  filterByComments= '';

  //postsTitle: any = {};

  constructor(private http: HttpClient) {}

  ngOnInit(){
    return this.http.get(this.wpUrl)
      .subscribe(data => {
        for(let key in data){
          if(data.hasOwnProperty(key)){
            this.posts.push(data[key]);
          }
        }
        console.log(data);
        //console.log(this.postsTitle);
      })
  }

  onChange(optionFromMenu:string) {
    if(optionFromMenu === 'all'){
      this.posts = this.posts;
    } 
    if(optionFromMenu === 'closed') {
      this.posts = this.posts.filter(data => {
        return this.posts.includes('closed');
      });
    }
  }
}

mypipe.pipe.ts 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mypipe'
})
export class MyPipe implements PipeTransform {


  transform(posts: any[], comment_status: any): any {

    return posts;

    console.log(comment_status);

    if(comment_status === 'all') {


    }
  }

}

Хотя все мои изменения происходят через component.tsна данный момент, я бы хотел настроить его в файле pipe.ts, но простая работа привела меня в замешательство.Любые предложения приветствуются.

Если это поможет, приложение было настроено с использованием Angular 6 через Angular CLI.

1 Ответ

0 голосов
/ 11 сентября 2018

Вы можете использовать шаблонный способ формы, использовать [(ngModel)] в поле выбора, и вам больше не потребуется логика метода (change).Итак, обновите код вида: 

<select [(ngModel)]="commentStatus">
   <option value="all" selected="selected">All</option>
   <option value="open">Open</option>
   <option value="closed">Closed</option>
</select>

<ul>
  <li *ngFor="let post of posts | myPipe:commentStatus">
    <h1>{{ post.title }}</h1>
      comment status: {{ post.comment_status }}
  </li>
</ul>

Затем обновите ваш метод transform из класса pipe, чтобы он принимал текущее значение переменной commentStatus и затем фильтровал массив posts.Таким образом, код канала может быть таким: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myPipe'
})
export class MyPipePipe implements PipeTransform {

  transform(posts: any[], commentStatus: any): any {
    if(!commentStatus) {
      return posts;
    }
    if(commentStatus === 'all') {
      return posts;
    } else if(commentStatus === 'open' || commentStatus === 'closed') {
      let filterdPosts =  posts.filter((i) => {
      return i.comment_status == commentStatus;
      });
      return filterdPosts;
    }
  }

}

Пример Stackblitz

...