【问题标题】:How to hide an element of dynamic table in Angular 9如何在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
  • 这不是我的问题。数据库中的隐藏列是如何定义的?您目前如何在您的应用中检索这些信息?

标签: javascript html angular frontend


【解决方案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 吗?

【讨论】:

  • 我的问题是,如果我动态构建它,我不知道如何控制我的表。在我使用 &lt;table id="tabella" class="table table-striped table-hover"&gt; &lt;thead class="thead-dark"&gt; &lt;tr&gt; &lt;th scope="col"&gt;ID&lt;/th&gt; &lt;th scope="col"&gt;Nome&lt;/th&gt; &lt;th scope="col"&gt;Cognome&lt;/th&gt; &lt;th scope="col"&gt;Numero&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr *ngFor="let utente of utenti"&gt; &lt;th scope="row"&gt;{{utente.ID}}&lt;/th&gt; &lt;td&gt;{{utente.NOME}}&lt;/td&gt; &lt;td&gt;{{utente.LAST_NAME}}&lt;/td&gt; &lt;td&gt;{{utente.NUMERO}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; 之前
  • 通过这段代码,我可以修改一行,我可以说“好的,现在我想隐藏 ID 列,所以只需向该列添加隐藏属性”或“好的,我想修改css 到此列,只需将范围添加到该行”。现在我尝试动态构建我的表,因为我想让我的代码更通用并且可用于所有数据库,但现在我没有为每个列和行设置一个 ,而只有一个使用 *ngFor 的。 . 我希望现在我的问题不那么混乱了。
猜你喜欢
  • 1970-01-01
  • 2014-05-11
  • 1970-01-01
  • 1970-01-01
  • 2015-06-26
  • 1970-01-01
  • 2011-01-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多