Angular 5-在带有管道的选择标签中使用过滤器 [英] Angular 5 - using filter in select tag with pipe

问题描述

我有一个select html标记，我想按所选值过滤结果列表.我正在使用管道在*ngFor创建的列表中显示它们.当我添加新项目时，即使有一个具有相同名称的选项，select标记也会添加一个新选项.我该如何解决?我希望我的选择标记仅显示唯一值(过滤器???).我也想设置一个默认值.

I have a select html tag and I want to filter my list of results by the selected value. I'm using a pipe to show them in a *ngFor created list. when I add a new item, the select tag add a new option, even if there's an option with the same name yet. How could I fix this? I want my select tag to show unique value only (Filter???). I'd like to set a default value too.

屏幕截图:

App.component.html :

<div class="container">
  <div class="row">
  <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">

  <select
    name="serverStatus"
    id="serverStatus"
    [(ngModel)]="filteredStatus">
    <option
      *ngFor="let server of servers"
      value="{{server.status}}">{{server.status}}</option>
  </select>
  <hr>
  <ul class="list-group">
    <li
      class="list-group-item"
      *ngFor="let server of servers | filter:filteredStatus:'status'"
      [ngClass]="getStatusClasses(server)">
      <span
        class="badge">
        {{ server.status }}
      </span>
      <strong>{{ server.name }}</strong> |
      {{ server.instanceType | uppercase }} |
      {{ server.started | date:'fullDate' | uppercase }}
    </li>
  </ul>
</div>

App.component.ts :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  servers = [
{
  instanceType: 'medium',
  name: 'Production Server',
  status: 'stable',
  started: new Date(15, 1, 2017)
},
{
  instanceType: 'large',
  name: 'User Database',
  status: 'stable',
  started: new Date(15, 1, 2017)
},
{
  instanceType: 'small',
  name: 'Development Server',
  status: 'offline',
  started: new Date(15, 1, 2017)
},
{
  instanceType: 'small',
  name: 'Testing Environment Server',
  status: 'critical',
  started: new Date(15, 1, 2017)
}
];

filteredStatus = '';

getStatusClasses(server: {instanceType: string, name: string, status: string, started: Date}) {
return {
  'list-group-item-success': server.status === 'stable',
  'list-group-item-warning': server.status === 'offline',
  'list-group-item-danger': server.status === 'critical'
};
}
}

fiter.pipe.ts :

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

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

transform(value: string[], filterString: string, propName:string): any {
if (value.length === 0 || filterString === '') {
  return value;
}
const resultArray = [];
for (const item of value) {
  if (item[propName] === filterString) {
    resultArray.push(item)
  }
}
return resultArray;
}
}

这是一个stackblitz工作示例: https://angular-rwmfbj.stackblitz.io 编辑器: https://stackblitz.com/edit/angular-nck1kn

Here is a stackblitz working example: https://angular-rwmfbj.stackblitz.io Editor: https://stackblitz.com/edit/angular-nck1kn

推荐答案

尝试一下

App.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  servers = [
    {
      instanceType: 'medium',
      name: 'Production Server',
      status: 'stable',
      started: new Date(15, 1, 2017)
    },
    {
      instanceType: 'large',
      name: 'User Database',
      status: 'stable',
      started: new Date(15, 1, 2017)
    },
    {
      instanceType: 'small',
      name: 'Development Server',
      status: 'offline',
      started: new Date(15, 1, 2017)
    },
    {
      instanceType: 'small',
      name: 'Testing Environment Server',
      status: 'critical',
      started: new Date(15, 1, 2017)
    }
  ];

  filteredStatus = '';

  serverStatus:  {
      instanceType: string,
      name: string,
      status: string,
      started: Date
    }[] = [];

    constructor(){
      this.initializeStatus();

     //For setting the default value of the select try this
     if(this.serverStatus.length != 0)
        this.filteredStatus = this.serverStatus[0].status;
    }

  getStatusClasses(server: {instanceType: string, name: string, status: string, started: Date}) {
    return {
      'list-group-item-success': server.status === 'stable',
      'list-group-item-warning': server.status === 'offline',
      'list-group-item-danger': server.status === 'critical'
    };
  }

  //Initalize the status
  initializeStatus(){
    this.serverStatus = [];
    //Container for the current status
    let currentStatus = "";
      for(let x of this.servers){
        if(x.status != currentStatus){
          this.serverStatus.push(x);
        }
        //Equate for reference
        currentStatus = x.status;
      }
  }
}

在 App.component.html

将*ngFor="let server of servers"更改为此*ngFor="let server of serverStatus"

这篇关于Angular 5-在带有管道的选择标签中使用过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！