Question

我有这个列表，在这个列表中我有parentId。

当parentId==null时，该项目为Parent；当parentId具有值时，则为该ID的子项。

  const ELEMENT_DATA: Element[] = [
  {position: 1,parentId:null, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2,parentId:1, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3,parentId:1, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4,parentId:1, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5,parentId:null, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6,parentId:5, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7,parentId:5, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8,parentId:5, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9,parentId:5, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10,parentId:5, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11,parentId:null, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12,parentId:11, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13,parentId:11, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14,parentId:11, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15,parentId:11, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16,parentId:null, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17,parentId:16, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18,parentId:16, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19,parentId:16, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20,parentId:16, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

现在，我需要当该项目具有parentId时被隐藏，而当它没有值时必须将其显示出来，并且在单击时将其命名，它将打开该项目的相关子项。

Demo

如何在有角度的材料表中进行这项工作？？???

Answer 1

第一次，您应该在项目上安装Angular Material，点击此链接并安装并阅读文档： https://material.angular.io/guide/getting-started

最后一次需要使用Angular Material Components例如在list中显示数据： https://material.angular.io/components/list/overview

展开角形材料表中的行

1 个答案: