我有两个接口(用户和类别),我在类别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 ?个