typescript 如何在angular 7中展开和折叠表格行

dced5bon  于 7个月前  发布在  TypeScript
关注(0)|答案(1)|浏览(94)

我正在尝试展开和折叠每个表行,而不添加新的属性(expanded1和expanded2)在json数据。如何做到这一点。这是可能的还是不可能的?
app.component.ts:

export class AppComponent implements OnInit{
    expanded1 = false;
    expanded2 = false;
  data1 = [
    {
      name: 'john',
      place: 'forest',
      phone: '124-896-8963' 
    },
    {
      name: 'Jay',
      place: 'City',
      phone: '124-896-1234'
    },
    {
      name: 'Joseph',
      place: 'sky',
      phone: '124-896-9632' 
    },
  ];

  ngOnInit(){
   // this.fooGet();
  }

  // fooGet() {
  //   const modifiedData = this.data1.map((d) =>
  //     Object.assign(d, { expanded1: false, expanded2: false })
  //   ); 
  //   console.log(modifiedData);
  // }

}

字符串
演示:https://stackblitz.com/edit/angular-jfslbe?file=src%2Fapp%2Fapp.component.ts

o7jaxewo

o7jaxewo1#

最好的选择是创建一个新的组件来处理每一行,并使用逻辑来切换名称和位置细节。
在这种方法中,可以将控制名称和地点细节的可见性的布尔值外包给新的“表组件”,并且可以使JSON非常简单。
Here是相同的示例实现,

相关问题