我有两个接口(用户和类别),我在类别id中有这个接口的关系,如何让这个接口像SQL中的INNER JOIN一样加入.

My Code :

  • First API(帖子中的名称):
{
  "list": [
    {
      "id": 1,
      "title": "samsung",
      "body": "samsung is ......",
      "userId": "1"
    },
    {
      "id": 2,
      "title": "google",
      "body": "google is ......",
      "userId": "1"
    },
    {
      "id": 1,
      "title": "yahoo",
      "body": "yahoo is ......",
      "userId": "2"
    }
  ],
  "count": 3,
  "success": true
}
  • 第二个接口(用户名称):
{
  "list": [
    {
      "userId": 1,
      "username": "Michil"
    },
    {
      "userId": 2,
      "username": "Alix"
    },
    {
      "userId": 3,
      "username": "Jon"
    }
  ],
  "count": 3,
  "success": true
}
  • 我为这个API创建了两个接口,如下所示:
import { PostsList } from "./PostsList "

export interface Posts{
    list: PostsList[]
    count: number
    success: boolean
}
export interface PostsList {
    id: number
    title: string
    body: string
    userId: string
}
import { UsersList} from "./UsersList"

export interface Users{
    list: List[]
    count: number
    success: boolean
}
export interface UsersList{
    userId: number
    username: string
}
  • 我创建了一个服务来从API URL获取数据,如下所示:
getPosts(): Observable<Posts>{
    return this.http.get<Posts>(`https://api.api.com/post/list`).pipe(
      tap(posts=> console.log(posts)),
    );
 }

getUsers(): Observable<Users>{
    return this.http.get<Users>(`https://api.api.com/users/list`).pipe(
      tap(users => console.log(users)),
    );
 }

  • 我在组件中调用了该服务,如下所示:
export class UsersComponent implements OnInit{
  displayedColumns: string[] = ['id', 'title', 'body', 'userId', 'username'];
  users:any;

  constructor(private myService: MyService){ }

  ngOnInit(): void {
    this.onGetUsers();
  }

  onGetPosts(): void{
    this.myService.getPosts().subscribe(
      (response => {
        this.users = new MatTableDataSource<Posts>(response);
      })
    );
  }

  onGetUsers(): void{
    this.myService.getUsers().subscribe(
      (response => {
        this.Posts = new MatTableDataSource<Posts>(response);
        this.Users = new MatTableDataSource<Users>(response);
      })
    );
  }

  • 并在material 表中查看此数据,如下所示:
<table mat-table [dataSource]="users" class="mat-elevation-z8">
  
     Position Column 
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> id</th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef> title</th>
      <td mat-cell *matCellDef="let element"> {{element.title}} </td>
    </ng-container>
  
    <ng-container matColumnDef="body">
      <th mat-header-cell *matHeaderCellDef> body</th>
      <td mat-cell *matCellDef="let element"> {{element.body}} </td>
    </ng-container>
  
    <ng-container matColumnDef="userId">
      <th mat-header-cell *matHeaderCellDef> userId </th>
      <td mat-cell *matCellDef="let element"> {{element.userId}} </td>
    </ng-container>

    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef> username </th>
      <td mat-cell *matCellDef="let element"> {{element.username}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

How can I display username from another api ?

推荐答案

您可以创建一个结合了PostsListUsersList的新界面,如下所示:

export interface TableView {
  post: PostsList;
  user: UsersList;
}

之后,您需要在该视图中填充数据.唯一的问题是它依赖于两个API,因此我们需要两个API的结果,之后,我们可以try 连接两个API的数据.一个简单的方法是通过Promise.all.

export class UsersComponent implements OnInit {
  displayedColumns: string[] = ['id', 'title', 'body', 'userId', 'username'];
  // Datasource for table
  dataSource: MatTableDataSource<TableView> =
    new MatTableDataSource<TableView>();

  constructor(private myService: UsersService) {}

  ngOnInit(): void {
    // Promise for getting results of both API's
    let dataPromise: Array<Promise<any>> = [];
    // Convert observables and push to this promise
    dataPromise.push(this.myService.getPosts().toPromise());
    dataPromise.push(this.myService.getUsers().toPromise());

    // Do data manipulation after we get results from both Promises
    Promise.all(dataPromise).then((responseList) => {
      // First item in responseList is from getPosts
      let posts: Posts = responseList[0];
      // Second item in responseList is from getUsers
      let users: Users = responseList[1];
      // Temporary array for storing data
      let tableData: Array<TableView> = [];

      posts.list.forEach((x) => {
        tableData.push({
          post: x,
          user: users.list.filter((y) => y.userId.toString() === x.userId)[0], // get the user for this userId
        });
      });
      this.dataSource = new MatTableDataSource<TableView>(tableData);
    });
  }
}

现在更改您的HTML以使用新界面.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  Position Column
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>id</th>
    <td mat-cell *matCellDef="let element">{{ element.post.id }}</td>
  </ng-container>

  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef>title</th>
    <td mat-cell *matCellDef="let element">{{ element.post.title }}</td>
  </ng-container>

  <ng-container matColumnDef="body">
    <th mat-header-cell *matHeaderCellDef>body</th>
    <td mat-cell *matCellDef="let element">{{ element.post.body }}</td>
  </ng-container>

  <ng-container matColumnDef="userId">
    <th mat-header-cell *matHeaderCellDef>userId</th>
    <td mat-cell *matCellDef="let element">{{ element.user.userId }}</td>
  </ng-container>

  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef>username</th>
    <td mat-cell *matCellDef="let element">{{ element.user.username }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

演示:https://stackblitz.com/edit/angular-tm2met?file=src%2Fusers%2Fusers.component.ts

Angular相关问答推荐

TransLoco合并本地和服务器端转换对象

如何用ANGLE指令覆盖Html元素的数据绑定属性

在Angular 多选下拉菜单中实现CDK拖放排序的问题

路由在全局导航中总是给我/甚至使用相对路径

NGX- colored颜色 Select 器安装出错

弯管记忆

列表和映射的SCSS语法

有角.服务.模块构建失败.无法读取未定义的属性(读取文件)

使用 RXJS 进行空闲/不活动跟踪

Angular p-triStateCheckbox for each Select 更改不同的 colored颜色

Rxjs Observable:仅为第一个订阅者获取 HTTP 数据,为其余订阅者获取缓存数据

Observable .do() 运算符 (rxjs) 的用例

如何在两个模块之间共享服务 - @NgModule 在Angular 而不是在组件之间?

Observable.forkJoin 和数组参数

如何在 Angular 2 中获取与 ElementRef 关联的组件的引用

请求 http.GET 时发送的 Angular2 OPTIONS 方法

在 Angular 中动态设置样式

ERROR 错误:StaticInjectorError(AppModule)[UserformService -> HttpClient]:

`[(ngModel)]` vs `[(value)]`

缺少带有Angular的语言环境XXX的语言环境数据