Angular中从子组件循环表格数据无法正确显示。
创始人
2024-10-31 01:30:33
0次

这个问题的原因在于在子组件中循环的数据无法正确传递到父组件中的表格中。为了解决这个问题,需要增加一些额外的代码来确保数据正确传递和显示。

  1. 在父组件中添加一个属性来保存子组件中需要循环的数据:
// parent.component.ts
export class ParentComponent {
  childData: any[] = [];
}
  1. 在子组件中,将需要循环的数据通过@Input()装饰器传递到父组件中:
// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    
          ...
        
{{ item.name }} {{ item.age }}
` }) export class ChildComponent { @Input() data: any[] = []; }
  1. 在父组件的模板中,将子组件的数据通过@Input()装饰器传递给子组件:
// parent.component.html

  1. 在父组件中,将需要循环的数据赋值给新增的属性:
// parent.component.ts
export class ParentComponent implements OnInit {
  childData: any[] = [];

  ngOnInit(): void {
    this.childData = [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 },
      { name: 'Charlie', age: 35 }
    ];
  }
}

这样,子组件中的数据就能正确地循环并显示在父组件的表格中了。

相关内容

热门资讯

技术分享辅助!胖猪竞技辅助透视... 技术分享辅助!胖猪竞技辅助透视挂,盛世2真的有外挂,真是证实有挂1、让任何用户在无需胖猪竞技安装教程...
有玩家发现透视挂!新版玄龙辅助... 有玩家发现透视挂!新版玄龙辅助透视挂,威九国际存在有外挂,确实有挂解密1)新版玄龙有没有挂:进一步探...
记者爆料透视挂!嘉兴黑桃A辅助... 记者爆料透视挂!嘉兴黑桃A辅助透视挂,易棋游戏真的是有外挂,好像有挂实锤1)嘉兴黑桃A免费钻石:进一...
昨日透视挂!微乐龙江麻将辅助透... 昨日透视挂!微乐龙江麻将辅助透视挂,pp是真的有外挂,好像有挂功能进入游戏-大厅左侧-新手福利-激活...
经调查开挂!夜猫麻将辅助透视挂... 经调查开挂!夜猫麻将辅助透视挂,读了贵阳捉鸡麻将是有外挂,总是有挂攻略1、完成夜猫麻将辅助器v3.3...
刚刚透视挂!随便跑胡子辅助透视... 刚刚透视挂!随便跑胡子辅助透视挂,长城互娱存在有外挂,总是有挂秘籍1、随便跑胡子免费辅助多个强度级别...
必知教程透视挂!海星大厅辅助透... 必知教程透视挂!海星大厅辅助透视挂,常州麻将是有外挂,一直有挂功能暗藏猫腻,小编详细说明海星大厅破解...
热门推荐辅助!中至万年麻将辅助... 热门推荐辅助!中至万年麻将辅助透视挂,决胜数独是真的有外挂,其实有挂头条中至万年麻将辅助器是一种具有...
推荐攻略辅助!微乐掼蛋辅助透视... 推荐攻略辅助!微乐掼蛋辅助透视挂,情怀娱乐真的是有外挂,其实真的有挂1、每一步都需要思考,不同水平的...
据文件显示透视挂!玉海楼辅助透... 据文件显示透视挂!玉海楼辅助透视挂,啪啪赢麻将是有外挂,果然有挂秘笈1、玉海楼辅助器安装包、玉海楼辅...