html - 自动列出当前 Object 数据迭代的每个属性值的动态表组件(ngFor 指令);
问题描述
言归正传,我正在创建一个表格组件,它接收一个包含动态表格所需的所有信息的对象,包括头部信息等。我的任务是让每一行(数据)都成为可能,我的表不需要知道属性名称,只需立即列出它的值。
我做了一些控制台测试,它似乎可以解决这些问题:
const dataList = [
{ name: 'Eugene', age: 20, alive: true },
{ name: 'Game Master', age: 40, alive: false },
{ name: 'Camel', age: 22, alive: true }
];
for(let data of dataList) {
console.log("All data info");
console.log(data);
for(let propertyValue of Object.values(data)) {
console.log(propertyValue);
}
}
结果:
VM1123:2 所有数据信息
VM1123:3 {name: 'Eugene', age: 20, alive: true}
VM1123:6 Eugene
VM1123:6 20
VM1123:6 true
VM1123:2 所有数据信息
VM1123:3 {name: 'Game Master', age: 40, alive: false}
VM1123:6 Game Master
VM1123:6 40
VM1123:6 false
VM1123:2 所有数据信息
VM1123:3 {name: 'Camel', age: 22, alive: true}
VM1123: 6 骆驼
VM1123:6 22
VM1123:6 真
我试图达到相同的结果,但这次在 ngFor 指令之间进行迭代,如下所示:
<tr *ngFor="let data of tableConfig.data; let i = index">
<td *ngFor="let propValue of Object.values(data)"> {{ propValue }}</td>
但是,问题是我无法访问组件 HTML 中的“对象”类。
“PaginationTableComponent”类型上不存在属性“对象”。
解决方案
添加方法以获取您的对象值,例如
getValues(data): any{
return Object.values(data);
}
在模板中:
<td *ngFor="let propValue of getValues(data)"> {{ propValue }}</td>
推荐阅读
- firebase - 使用 react-native 从 firebase 注册用户时获取未定义的数据
- windows - 使用 Docker Desktop 在未定义端口上公开服务
- c# - 有没有办法通过 .NET 为 Apache Spark 查询 Databricks DBFS 或 parquets?
- .htaccess - 在 Prestashop 1.7.6.7 中将旧 URL 重定向到新 URL
- node.js - 警告:来自 useState() 和 useReducer() Hooks 的状态更新不支持 " + ... MERN 堆栈应用程序
- docker - 重新启动 mac 后,docker+ ros 的显示和 gui 将无法工作
- javascript - 使用nodejs检查存储在mongodb中的数组中某个值的数量
- python - 使用 matplotlib pgf 后端更改字体粗细
- javascript - 选中的单选选项从一个滑动到另一个(vanilla js)
- ruby-on-rails - Rails 模型 - before_read 或类似的,允许您在访问数据之前运行方法