相关疑难解决方法(0)

我有以下组件:

class MyComponent {
  public mode = 'v';
  readonly modes = ['v', 'a', 'd'];
  ....
}

现在我想用a ngFor来显示所有模式的按钮,modes除了存储的当前模式mode.我有以下代码:

<button *ngFor="let othermode of modes">
  {{ othermode }}
</button>

我总是希望显示两个按钮,包含剩余的两个模式.我试过这个:

<button *ngFor="let othermode of modes.filter(elem => elem !== this.mode)">
  {{ othermode }}
</button>

但它不起作用.我看到的所有问题都需要为此功能编写自定义管道,但是没有任何简单的方法来过滤字符串数组,只使用这些值？

所以我正在尝试构建一个自定义管道来对ngFor循环中的多个值进行搜索过滤.我已经花了好几个小时才找到一个好的工作示例,其中大多数是基于以前的版本,似乎没有用.所以我正在构建Pipe并使用控制台为我提供值.但是,我似乎无法显示输入文本.

以下是我以前寻找工作示例的地方:

角4管过滤器

http://jilles.me/ng-filter-in-angular2-pipes/

https://mytechnetknowhows.wordpress.com/2017/02/18/angular-2-pipes-passing-multiple-filters-to-pipes/

https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview

https://www.youtube.com/results?search_query=filter+search+angular+2

https://www.youtube.com/watch?v=UgMhQpkjCFg

这是我目前的代码:

component.html

<input type="text" class="form-control" placeholder="Search" ngModel="query" id="listSearch" #LockFilter>

      <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
        <input type="checkbox" ngModel="lock.checked" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
        <label for="{{lock.ID}}" class="check-label"></label>
        <h3 class="card-text name" ngModel="lock.name">{{lock.User}}</h3>
        <h3 class="card-text auth" ngModel="lock.auth">{{lock.AuthID}}</h3>
        <h3 class="card-text form" ngModel="lock.form">{{lock.FormName}}</h3>
        <h3 class="card-text win" ngModel="lock.win">{{lock.WinHandle}}</h3>
      </div>

pipe.ts

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

@Pipe({
  name: 'LockFilter'
})

export class LockFilterPipe implements PipeTransform {
  transform(locked: any, query: string): any { …

我有两个组件，分别称为list和details，单击list-item列表中的特定组件。它将发出选定/单击list-item的details组件，如下图所示。

现在，我在该组件search上方放置了另一个组件，list如下所示：

如何为列表组件中的当前内容应用过滤器？这样我就可以轻松搜索。list-itemslist-items