json Angular未显示与当前显示的用户相同的用户

dtcbnfnu 于 2023-08-08 发布在 Angular

关注(0)|答案(2)|浏览(133)

所以我需要一些帮助来显示我从API调用中获得的用户列表…每个用户都有一个唯一的ID，但在我从API中获得的JSON中，第一个用户总是与当前打开的用户相同...

**例如...**我的url是www.domain.com/user/12345，对于这个用户，我得到了一个相关用户的列表，但该列表上的第一个用户是这个ID为12345的同一个用户...如何跳过与当前打开的ID相同的用户，以便在这些类似用户的列表中不会显示该用户？

下面是我如何从API中获取数据的服务：

getCustomerSimilar(id:number): Observable<CustomerSimilar> {
    return this.httpClient.get<CustomerSimilar>(`${environment.apiUrl}customer/${id}/similar`)
  }

字符串
下面是我如何从API获取用户的.ts文件：

getCustomerSimilar() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.customerService.getCustomerSimilar(id).subscribe(
      data => {
        this.similarClients = data.data;
      },
      error => {
        console.log('Error', error);
      });
  }

型
下面是我得到的JSON响应：

"data": [
    {
        "id": "12345",
        "name": "Name Lastname",
    },
    {
        "id": "12346",
        "name": "Something Lastname",
    },
    {
        "id": "12347",
        "name": "Something Something",
    }
 ]

型
这是我的模型

export interface CustomerSimilar {
  data: [
    {
      id: number;
      name: string;
    }
  ]
}

型
下面是HTML模板，向用户展示：

<mat-list-item *ngFor="let podobna of similarClients" class="mat-list-item-focus" routerLink="/customers/{{podobna.id}}" role="navigation">
          <mat-icon class="material-icons-outlined" matListItemIcon>account_circle</mat-icon>
          <div matListItemTitle class="similar-customer-name">{{podobna.name}}</div>
          <div matListItemLine class="similar-customer-ddv" *ngIf="podobna.vat_number">VAT: {{podobna.vat_number}}</div>
          <div matListItemLine class="similar-customer-id">ID: {{podobna.id}}</div>
          <div matListItemLine class="similar-customer-email" *ngIf="podobna.email">Email: {{podobna.email}}</div>
        </mat-list-item>

型

JSON

来源：https://stackoverflow.com/questions/76685534/angular-dont-show-same-user-as-currently-shown

2条答案

按热度按时间

3lxsmp7m1#

在组件getCustomerSimilar()方法中的subscribe方法内接收到响应后，根据id在组件级别过滤从服务接收到的响应数据，并将其分配给this.similarClients数组。
阅读更多关于阵列滤波器here的信息。

参考以下代码：

getCustomerSimilar() {
        const id = Number(this.route.snapshot.paramMap.get('id'));
        this.customerService.getCustomerSimilar(id).subscribe(
          data => {
            data.data = data?.data?.filter(function (el) {
            return el.id != id ;
           }
        );
       this.similarClients =data;
      },
      error => {
        console.log('Error', error);
      });
  }

字符串

请参考下面的纯JavaScript工作示例：

var arr ={
   "data": [
    {
        "id": "12345",
        "name": "Name Lastname"
    },
    {
        "id": "12346",
        "name": "Something Lastname"
    },
    {
        "id": "12347",
        "name": "Something Something"
    }
  ]
 }

const id = 12345;
 
arr.data = arr?.data?.filter(function (el) {
    return el.id != id ;
});

console.log(arr);

型
您的模型应更正为：

export interface ResultObject {
    data: items[];
}

export interface Items {
    id:   string;
    name: string;
}

型

赞(0）回复(0）举报 2023-08-08

fzsnzjdm2#

您可以像那样过滤该用户的ID以外的其他信息

getCustomerSimilar() {
  const id = Number(this.route.snapshot.paramMap.get('id'));
  this.customerService.getCustomerSimilar(id)
  .pipe(
    map(response => response.data),
    map(users => users.filters(user => user.id != id))
  )
  .subscribe(
    data => {
      this.similarClients = data;
    },
    error => {
      console.log('Error', error);
    });
}

字符串
从rxjs导入map

赞(0）回复(0）举报 2023-08-08

我来回答

json Angular未显示与当前显示的用户相同的用户

2条答案

相关问题

热门标签

最新问答