typescript 如何在Angular中从响应对象中逐个取出JSON对象并显示在表格中？

slhcrj9b 于 2022-11-26 发布在 TypeScript

关注(0)|答案(3)|浏览(124)

JSON数组从我的Java应用程序中作为响应对象进入typescript。我需要选择每个对象并显示到对应于该typescript页面的html页面中。

列表-用户.组件.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-list-user',
  templateUrl: './list-user.component.html',
  styleUrls: ['./list-user.component.css']
})
export class ListUserComponent implements OnInit {
  loginForm!: FormGroup;
  submitted = false;
  jdbc: any;
  username:any

  constructor(private http: HttpClient, private router: Router) { }

  ngOnInit() {
    this.username = JSON.parse(localStorage.getItem("session") || "");
    let listuser: any = {
      username: this.username,
    }
    this.http.post('http://localhost:8080/demoprojectjava/list-user/',
      listuser, { observe: 'response' }).subscribe(res => {
          console.log(res);
  });
  }
}

列表-用户.组件.html

<div>
    <h1 class="listuser"> Display Data from Json File </h1>
    <table>
        <thead>
        <tr>
            <th>User Id</th>
            <th>Lastname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{--Here I need value from Json array}}</td>
            <td>{{--Here I need value from Json array}}</td>
        </tr>
    </tbody>  
    </table>
</div>

当我在控制台中运行代码时，我得到了**console.log（res）的输出结果;**如：

{"user_data":[{"user_id":"111","username":"Hridya"},{"user_id":"222","username":"Rizz"}]}

typescript

来源：https://stackoverflow.com/questions/74569701/how-to-take-json-objects-one-by-one-from-response-object-and-display-in-table-in

3条答案

按热度按时间

f1tvaqid1#

将http请求作为Observable存储在一个属性中（这里是userData$），然后在模板中使用async pipe，使其自动具有Angular subscribe，然后使用ngFor迭代响应中的所有元素，并相应地显示数据。

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

type ResponseTypeFromYourBackend = any;

@Component({
  selector: 'app-list-user',
  templateUrl: './list-user.component.html',
  styleUrls: ['./list-user.component.css']
})
export class ListUserComponent implements OnInit {
  loginForm!: FormGroup;
  submitted = false;
  jdbc: any;
  username:any
  userData$: Observable<ResponseTypeFromYourBackend>;

  constructor(private http: HttpClient, private router: Router) { }

  ngOnInit() {
    this.username = JSON.parse(localStorage.getItem("session") || "");
    let listuser: any = {
      username: this.username,
    }
    this.userData$ = this.http.post('http://localhost:8080/demoprojectjava/list-user/',
      listuser,
      { observe: 'response' }
    );
  }
}

<div>
  <h1 class="listuser"> Display Data from Json File </h1>
  <table *ngIf="userData$ | async as data">
    <thead>
    <tr>
      <th>User Id</th>
      <th>Lastname</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of data.user_data">
      <td>{{ user.user_id}}</td>
      <td>{{ user.username}}</td>
    </tr>
    </tbody>
  </table>
</div>

赞(0）回复(0）举报 2022-11-26

8gsdolmq2#

最好的方法是执行以下操作：
1.在类级别定义可观察项：

userData$: Observable<YourType>;
...
ngOnInit() {
   ...
   this.userData$ = this.http.post('http://localhost:8080/demoprojectjava/list-user/',
      listuser).pipe(map(item => item.user_data));
  }

1.使用async管道订阅此可观察对象并迭代数组：

<tr *ngFor="let item of userData$ | async">
  <td>{{item.user_id}}</td>
  <td>{{item.username}}</td>
</tr>

赞(0）回复(0）举报 2022-11-26

z2acfund3#

创建一个变量来存储响应，并使用ngFor循环访问数组。
第一个

赞(0）回复(0）举报 2022-11-26

我来回答

typescript 如何在Angular中从响应对象中逐个取出JSON对象并显示在表格中？

3条答案

相关问题

热门标签

最新问答