Question

我使用Angular 5管道在输出到ngFor之前处理数组。

我的数组包含所有活跃用户，我希望它始终让当前登录的用户位于数组的第0位，以便它首先显示在ngFor输出中。

我可以按字母顺序排序desc / asc，但我似乎无法找到一个可靠的方法来做到这一点。

管道可能是错误的方法，可能在observable上以某种方式使用过滤器，然后输出到主页面是正确的方法，但我再也不知道如何实现它。

我的观察结果在这里输出：

getActiveUsers(): Observable<iUser[]> {
  return this.db.collection<iUser>('users').valueChanges().catch(this.catchError);                 
}

订阅发生在我的组件

中

    this.auth.getActiveUsers().subscribe( async usersAvailable => {
      this.usersFetched = usersAvailable
  }, error => console.log(error));

在组件html中显示（管道被输入当前用户ID以进行比较）

  <ion-row *ngFor="let i of rows">
    <div class="o-userGrid__item" (click)="openItem(u)" *ngFor="let u of usersFetched | filterActive: { activeUser: activeAccount }" width-33>
      <img [src]="u?.photoURL" />
      <div class="o-userGrid__title">
        {{ u?.displayName }}
      </div>
    </div>
  </ion-row>

我的filterActive管道在这里输入当前用户ID：

filterActive: { activeUser: activeAccount }

我的管道剩下的是以下内容。如上所述，我已经尝试了一些排序方法，如字母组织等，但当然这不是我需要的，所以重申：我需要管道让用户，其id匹配活动用户ID，输入到管道中页面上的第一个输出或数组的位置[0]

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

@Pipe({
  name: 'filterActive',
})
export class FilterActivePipe implements PipeTransform {

  transform(array: Array<string>, args?: any): Array<string> {  

    // console.log("indexOf ", array.indexOf(args.activeUser) );

  return  array.sort( (a:any, b:any) => {

      console.log("arrayoutput ", b);    
      if( b.uid == args.activeUser ) {

        console.log("active user found ", b.uid + " " + args.activeUser);  
      }      

      return b;
    });


  }
}

Answer 1

最后使用以下管道：

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

  @Pipe({
    name: 'filterActive',
  })
  export class FilterActivePipe implements PipeTransform {

    transform(array: Array<string>, args?: any): Array<string> {  
      array.unshift( 
        array.splice( 
          array.findIndex( (item:any) => item.uid === args.activeUser), // move the active user to the first position in the array
        1)[0]
      )
      return array;    
    }
  }

Javascript如果字符串匹配数组属性重新排序数组，它在0位置

1 个答案: