时间戳

首页 > 解决方案 > 如何在Angular 9中隐藏动态表的元素

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

问题描述

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

这是我的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 但是，我必须再次管理我的表格的单个单元格。

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

标签： javascripthtmlangularfrontend

解决方案

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

  • 要将类名添加cell-id到 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？

推荐阅读