Question

我试图在表格中显示数据我从HTML中获取了部分工作，因为我使用它来保持空白，并且当我进行搜索时会显示数据我想改变它，以便在我加载页面时显示数据并且表格已满。

这是我的服务： userservice.ts：

public getUserss() {
    return this.http.get('http://localhost:8081' + '/users');
}

users.component.ts：这是我需要实现代码的地方：它错了

ngOnInit(): void {
    this.userservice.getUserss().subscribe();
}

我想要显示的表是一个html表而不是材料表：

  <table class="table table-striped">
  <tr>
    <th>ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Username</th>
    <th>Password</th>
    <th>Role</th> <th colspan="2">Actions</th>
  </tr>
  <tr *ngFor="let u of pageUsers?.content">
    <td>{{u.id}}</td>
    <td>{{u.nom}}</td>
    <td>{{u.prenom}}</td>
    <td>{{u.email}}</td>
    <td>{{u.username}}</td>
    <td>{{u.password}}</td>
    <td>{{u.role}}</td>
    <td>
      <button style="color: #4CAF50;" class="glyphicon glyphicon-pencil" (click)="onEditUser(u.id)" ></button>
    </td>
    <td>
      <button style="color: red;" class="glyphicon glyphicon-trash" (click)="deleteuser(u)" ></button>
    </td>
  </tr>
</table>

我只想知道如何更改我的服务和我的组件以在init

上显示数据

JSON

[
  {
    "id": 1,
    "nom": "SBOUI",
    "prenom": "sameh",
    "email": "samehsboui_enicar@gmail.com",
    "username": "sameh",
    "password": "sameh",
    "role": "admin"
  },
  {
    "id": 3,
    "nom": "ORANGE",
    "prenom": "",
    "email": "orange@yahoo.com",
    "username": "OrangeIP",
    "password": "orange140",
    "role": "client"
  },
  {
    "id": 37,
    "nom": "try2name",
    "prenom": "try2 ",
    "email": "try@gmail.com",
    "username": "try158",
    "password": "zkndgkji",
    "role": "client"
  }
]

Answer 1

您需要指定值

arrange

Answer 2

您需要在HTML代码中加入async管道。这是因为您的数据是异步的，并且在订阅它之后不会将其保存在ts中的变量中。

因此HTML不知道延迟后这些数据是否可用。因此使用async管道。

<table class="table table-striped">
      <tr>
        <th>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Username</th>
        <th>Password</th>
        <th>Role</th> <th colspan="2">Actions</th>
      </tr>
      <tr *ngFor="let u of (pageUsers | async).content">
        <td>{{u.id}}</td>
        <td>{{u.nom}}</td>
        <td>{{u.prenom}}</td>
        <td>{{u.email}}</td>
        <td>{{u.username}}</td>
        <td>{{u.password}}</td>
        <td>{{u.role}}</td>
        <td>
          <button style="color: #4CAF50;" class="glyphicon glyphicon-pencil" (click)="onEditUser(u.id)" ></button>
        </td>
        <td>
          <button style="color: red;" class="glyphicon glyphicon-trash" (click)="deleteuser(u)" ></button>
        </td>
      </tr>
    </table>

Answer 3

您正在获取响应的数组。所以你可以这样做。

  public ngOnInit(): void {
      this.userService.getUsers().subscribe(users => {
            this.pageUsers = users;
      });
   }

<table class="table table-striped">
  <tr>
    <th>ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Username</th>
    <th>Password</th>
    <th>Role</th> <th colspan="2">Actions</th>
  </tr>
  <tr *ngFor="let u of pageUsers">
    <td>{{u.id}}</td>
    <td>{{u.nom}}</td>
    <td>{{u.prenom}}</td>
    <td>{{u.email}}</td>
    <td>{{u.username}}</td>
    <td>{{u.password}}</td>
    <td>{{u.role}}</td>
    <td>
      <button style="color: #4CAF50;" class="glyphicon glyphicon-pencil" (click)="onEditUser(u.id)" ></button>
    </td>
    <td>
      <button style="color: red;" class="glyphicon glyphicon-trash" (click)="deleteuser(u)" ></button>
    </td>
  </tr>
</table>

将let u of pageUsers?.content更改为let u of pageUsers

使用角度5在表格中显示数据

3 个答案: