如何在Angular 9中隐藏动态表的元素

Posted 2023-02-22

【中文标题】如何在Angular 9中隐藏动态表的元素

【英文标题】：How to hide an element of dynamic table in Angular 9

【发布时间】：2020-06-21 14:27:07

【问题描述】：

我有一个表，我动态生成了列和行。

这是我的 table.component.html

  <table id="tabella" class="table table-striped table-hover">
    <thead class="thead-dark">
      <tr>
        <th *ngFor="let header of _object.keys(utenti[0]); let i = index"> header</th>

      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of utenti">

        <th *ngFor="let utente of _object.keys(row)">row[utente]</th>
      </tr>
    </tbody>
  </table>

这是我的 table.component.ts

import  Component, OnInit  from '@angular/core';
import  GetUtentiService  from '../../services/getutenti.service';

@Component(
  selector: 'app-utente',
  templateUrl: 'utente.component.html',
  styleUrls: ['./utente.component.css']
)
export class UtenteComponent implements OnInit 

   utenti: any;
   _object = Object;
  visibile: boolean;



  constructor(private _getutentiService: GetUtentiService)  

  ngOnInit() 

    // Richiamo la funzione definita nel service che effettua una get sul database

    this._getutentiService.getUtenti().subscribe(response => 
      this.utenti = response;
    , error => 
      console.log(error);
    );
  

这是我的服务。

import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';

@Injectable(
  providedIn: 'root'
)
export class GetUtentiService 

  private url: string = 'http://localhost:56493/Server/GetUtente';
  constructor(private http: HttpClient)  

  getUtenti() 
    return this.http.get(this.url);
  

现在我想控制表格中的单个单元格。我试图只隐藏 ID 的列，但在这段代码中我不能说“如果是 ID，则隐藏此列”，或者我想在 dd/mm/yyyy 而不是 yyyy/mm/dd hh 中格式化日期： mm:ss 但是，我必须再次管理表格的单个单元格。

如何对我的代码进行这些更改？

【问题讨论】：

隐藏列如何选择？由用户，由您的代码，由其他东西？

我在我的数据库中获得了一个名为“Hidden_​​ID”的属性，我不想向客户端显示它，但我想让我的代码通用，所以我更喜欢动态地制作我的表格不要为每一行指定 user.First_name、user.Last_name 等。

您的组件如何知道应该隐藏哪些列？

这是我的问题。我试图设置一个布尔变量，并在 this._object.keys(utenti[0]).includes('Hidden_​​ID') 工作时将其设置为 true，但我不知道如何仅隐藏此列html

这不是我的问题。数据库中的隐藏列是如何定义的？您目前如何在您的应用中检索这些信息？

【参考方案1】：

看起来你有两个问题。如果我理解正确，您需要：

要向 ID 单元格添加类名，如 cell-id， 将日期格式从 yyyy/mm/dd 更改为 dd/mm/yyyy

如果准确的话，你可以试试这个：

<tbody>
  <tr *ngFor="let row of utenti">
    <th *ngFor="let utente of _object.keys(row)"
      [ngClass]="'cell-id': row[utente] === 'id'">
        row[utente]
    </th>
  </tr>
</tbody>

对于你的第二个问题，你试过DatePipe 吗？

【讨论】：

我的问题是，如果我动态构建它，我不知道如何控制我的表。在我使用 <table id="tabella" class="table table-striped table-hover"> <thead class="thead-dark"> <tr> <th scope="col">ID</th> <th scope="col">Nome</th> <th scope="col">Cognome</th> <th scope="col">Numero</th> </tr> </thead> <tbody> <tr *ngFor="let utente of utenti"> <th scope="row">utente.ID</th> <td>utente.NOME</td> <td>utente.LAST_NAME</td> <td>utente.NUMERO</td> </tr> </tbody> </table>

之前

通过这段代码，我可以修改一行，我可以说“好的，现在我想隐藏 ID 列，所以只需向该列添加隐藏属性”或“好的，我想修改css 到此列，只需将范围添加到该行”。现在我尝试动态构建我的表，因为我想让我的代码更通用并且可用于所有数据库，但现在我没有为每个列和行设置一个

，而只有一个使用 *ngFor 的。 . 我希望现在我的问题不那么混乱了。