当前位置: 首页 > news >正文

[Angular] 主从表结构,从表记录在主表固定栏位上呈现

Background

主从表结构,有时为了方便数据呈现,在UI上不显示从表资料,那么需要动态把从表的资料加载到主表的固定栏位上。

例如:主表是人员信息,从表是银行卡信息,一个人在同一家银行可能有多张银行卡,且一个人可能在多家银行开户。

How to implement? 

1. Provided data list of person and bank account informaciton

a. Person information

personData: any[] = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park'},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park'},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park'}];

b. Bank list

  banks = [{ code: 'icbc', name: '工行' },{ code: 'abc', name: '农行' },{ code: 'ccb', name: '建行' },{ code: 'bocom', name: '交行' },{ code: 'boc', name: '中行' }];

 c. Bank account list

  bankAccounts: BankAccount[] = [{ key: '1', account: '1-工行001', bank: 'icbc' },{ key: '2', account: '2-交行001', bank: 'bocom' },{ key: '3', account: '3-建行001', bank: 'ccb' },{ key: '3', account: '3-农行001', bank: 'abc' },{ key: '1', account: '1-农行001', bank: 'abc' },{ key: '1', account: '1-农行002', bank: 'abc' },{ key: '2', account: '2-工行001', bank: 'icbc' },{ key: '1', account: '1-工行002', bank: 'icbc' }];

2. Interface

a. Person

interface Person {key: string;name: string;age: number;address: string;icbc: string;abc: string;ccb: string;bocom: string;boc: string;
}

b. Bank account

interface BankAccount {key: string;account: string;bank: string;
}

3. Implementation method

const refList = this.bankAccounts;const refType = this.banks;// 循环主表for (let item of this.personData) {//循环从表需显示在主表呈现的类型refType.forEach(typ => {const accoutsOfBank = refList.filter(o => o.key === item.key && o.bank === typ.code); //[{}]let accounts = '';// 按从表类型把资料合并for (const element of accoutsOfBank) {accounts += `${element.account};`;}// 根据从表类型,把合并的资料更新至主表固定栏位上switch (typ.code) {case 'icbc':item.icbc = accounts;break;case 'abc':item.abc = accounts;break;case 'ccb':item.ccb = accounts;break;case 'bocom':item.bocom = accounts;break;case 'boc':item.boc = accounts;break;default:break;}});}

4. The full source code

import { NgFor } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzTableModule } from 'ng-zorro-antd/table';interface Person {key: string;name: string;age: number;address: string;icbc: string;abc: string;ccb: string;bocom: string;boc: string;
}interface BankAccount {key: string;account: string;bank: string;
}@Component({selector: 'app-pages-sample-master-detail',template: `<p>主从表结构,有时为了方便数据呈现,在UI上不显示从表资料,那么需要动态把从表的资料加载到主表的固定栏位上。例如:主表是人员信息,从表是银行卡信息,一个人在同一家银行可能有多张银行卡,且一个人可能在多家银行开户。</p><nz-table #basicTable [nzData]="personData"><thead><tr><th>Name</th><th>Age</th><th>Address</th><th *ngFor="let bank of banks">{{ bank.name }}</th><th>Action</th></tr></thead><tbody><tr *ngFor="let data of basicTable.data"><td>{{ data.name }}</td><td>{{ data.age }}</td><td>{{ data.address }}</td><td>{{ data.icbc }}</td><td>{{ data.abc }}</td><td>{{ data.ccb }}</td><td>{{ data.bocom }}</td><td>{{ data.boc }}</td><td><a>Action 一 {{ data.name }}</a><nz-divider nzType="vertical"></nz-divider><a>Delete</a></td></tr></tbody></nz-table>`,changeDetection: ChangeDetectionStrategy.OnPush,standalone: true,providers: [],imports: [NzTableModule, NzDividerModule, NgFor]
})
export class MasterDetailComponent implements OnInit {personData: any[] = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park'},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park'},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park'}];banks = [{ code: 'icbc', name: '工行' },{ code: 'abc', name: '农行' },{ code: 'ccb', name: '建行' },{ code: 'bocom', name: '交行' },{ code: 'boc', name: '中行' }];bankAccounts: BankAccount[] = [{ key: '1', account: '1-工行001', bank: 'icbc' },{ key: '2', account: '2-交行001', bank: 'bocom' },{ key: '3', account: '3-建行001', bank: 'ccb' },{ key: '3', account: '3-农行001', bank: 'abc' },{ key: '1', account: '1-农行001', bank: 'abc' },{ key: '1', account: '1-农行002', bank: 'abc' },{ key: '2', account: '2-工行001', bank: 'icbc' },{ key: '1', account: '1-工行002', bank: 'icbc' }];constructor() {}ngOnInit(): void {const refList = this.bankAccounts;const refType = this.banks;// 循环主表for (let item of this.personData) {//循环从表需显示在主表呈现的类型refType.forEach(typ => {const accoutsOfBank = refList.filter(o => o.key === item.key && o.bank === typ.code); //[{}]let accounts = '';// 按从表类型把资料合并for (const element of accoutsOfBank) {accounts += `${element.account};`;}// 根据从表类型,把合并的资料更新至主表固定栏位上switch (typ.code) {case 'icbc':item.icbc = accounts;break;case 'abc':item.abc = accounts;break;case 'ccb':item.ccb = accounts;break;case 'bocom':item.bocom = accounts;break;case 'boc':item.boc = accounts;break;default:break;}});}console.log(this.personData);}
}

5. Test result

 

相关文章:

[Angular] 主从表结构,从表记录在主表固定栏位上呈现

Background 主从表结构&#xff0c;有时为了方便数据呈现&#xff0c;在UI上不显示从表资料&#xff0c;那么需要动态把从表的资料加载到主表的固定栏位上。 例如&#xff1a;主表是人员信息&#xff0c;从表是银行卡信息&#xff0c;一个人在同一家银行可能有多张银行卡&…...

Kotlin Multiplatform 创建多平台分发库

目标&#xff1a;通过本教程学习如何使用 Kotlin Multiplatform Library 创建多平台分发库(iOS&#xff0c;安卓)。 创建一个项目 1、本教程使用的是Android Studio创建 2、选择 新建工程&#xff0c;选择 Kotlin Multiplatform Library 3、点击next 输入需要创建的项目名称以…...

[SQL挖掘机] - union/union all 使用注意事项

因为当使用union和union all操作符时&#xff0c;有一些注意事项需要考虑&#xff1a; 1. 列数和数据类型匹配&#xff1a; 要使用union或union all合并结果集&#xff0c;两个或多个查询的 select 语句必须返回相同数量和类型的列。确保每个查询返回相同的列数&#xff0c;并…...

php 单例模式

1&#xff0c;单例模式&#xff0c;属于创建设计模式&#xff0c;简单来说就是一个类只能有一个实例化对象&#xff0c;并提供一个当前类的全局唯一可访问入口&#xff1b; 2&#xff0c;例子 <?phpclass Singleton {private static $instance null;// 禁止被实例化priva…...

【数据结构】实验二:顺序表

实验二 顺序表 一、实验目的与要求 1&#xff09;熟悉顺序表的类型定义&#xff1b; 2&#xff09;熟悉顺序表的基本操作&#xff1b; 3&#xff09;灵活应用顺序表解决具体应用问题。 二、实验内容 1&#xff09;在一个整数序列a1,a2,…,an中&#xff0c;若存在一个数&…...

【高级数据结构】线段树

目录 最大数&#xff08;单点修改&#xff0c;区间查询&#xff09; 线段树1&#xff08;区间修改&#xff0c;区间查询&#xff09; 最大数&#xff08;单点修改&#xff0c;区间查询&#xff09; 洛谷&#xff1a;最大数https://www.luogu.com.cn/problem/P1198 题目描述 …...

qt简易闹钟

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->stopBtn->setDisabled(true);this->setFixedSize(this->size()); //设置固定大小this->s…...

python和c加加有什么区别,c和c++和python先学哪个

本篇文章给大家谈谈c加加编程和python编程有什么区别&#xff0c;以及python和c加加有什么区别&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 1、python和c学哪个好 学C好。 C通常比Python更快&#xff0c;因为C是一种编译型语言&#xff0c;而Python则是…...

Visual Studio 2022 cmake配置opencv开发环境

1. 环境与说明 这里我用的是 widnows 10 64位&#xff0c;Visual Studio 用的 Visual Studio Community 2022 (社区版) 对于Android开发工程师来说&#xff0c;为什么要使用Visual Studio 呢 ? 因为在Visual Studio中开发调试OpenCV方便&#xff0c;可以开发调试好后&#xf…...

C++ GDAL找出多时相遥感影像缺失的日期并自动生成新的全零图像作为替补

本文介绍基于C 语言的GDAL库&#xff0c;基于一个存储大量遥感影像的文件夹&#xff0c;依据每一景遥感影像的文件名中表示日期的那个字段&#xff0c;找出这些遥感影像中缺失的成像日期&#xff0c;并新生成多个像元值全部为0的栅格文件&#xff0c;作为这些缺失日期当日的遥感…...

【AI底层逻辑】——篇章5(下):机器学习算法之聚类降维时间序列

续上&#xff1a; 目录 4、聚类 5、降维 6、时间序列 三、无完美算法 往期精彩&#xff1a; 4、聚类 聚类即把相似的东西归在一起&#xff0c;与分类不同的是&#xff0c;聚类要处理的是没有标签的数据集&#xff0c;它根据样本数据的分布特性自动进行归类。 人在认知是…...

P1980 [NOIP2013 普及组] 计数问题

[NOIP2013 普及组] 计数问题 题目描述 试计算在区间 1 1 1 到 n n n 的所有整数中&#xff0c;数字 x x x&#xff08; 0 ≤ x ≤ 9 0\le x\le9 0≤x≤9&#xff09;共出现了多少次&#xff1f;例如&#xff0c;在 1 1 1 到 11 11 11 中&#xff0c;即在 1 , 2 , 3 , 4…...

需求管理全过程流程图及各阶段核心关注点详解

分析报告指出&#xff0c;多达76%的项目失败是因为差劲的需求管理&#xff0c;这个是项目失败的最主要原因&#xff0c;比落后的技术、进度失控或者混乱的变更管理还要关键。很多项目往往在开始的时候已经决定了失败&#xff0c;谜底就在谜面上&#xff0c;开始就注定的失败&am…...

Android开源 自定义emoji键盘,EmojiPack v2.1版本

目录 一&#xff0c;简介 二、安装 添加jitpack 仓库 添加依赖: 混淆规则: 三、使用 1、一次性配置emoji显示处理 二、emoji的自定义键盘的使用 一&#xff0c;简介 EmojiPack当前已提供emoji的显示和emoji的选择自定义键盘&#xff0c;在emoji显示这一方面&#xff0…...

SOLIDWORKS软件的优势分析 硕迪科技

在现代的机械设计领域&#xff0c;SOLIDWORKS是一款备受青睐三维设计软件&#xff0c;它具备强大的建模和设计功能&#xff0c;在全球范围内广泛应用于机械设计和工程领域&#xff0c;为用户提供了全面的工程解决方案。本文就SOLIDWORKS的优势进行详细分析。 1、易于学习和使用…...

Android性能优化之游戏的Theme背景图

近期&#xff0c;对游戏的内存优化&#xff0c;通过内存快照发现&#xff0c;某个Activity的theme背景图 占用3M 多。考虑着手对齐进行优化。 问题 查看游戏中的内存快照&#xff0c;发现有一个图片bitmap 占用3M 多&#xff0c;设置在Activity的背景中&#xff1a; 查看Phon…...

网络安全(黑客)系统自学,成为一名白帽黑客

前言 黑客技能是一项非常复杂和专业的技能&#xff0c;需要广泛的计算机知识和网络安全知识。你可以参考下面一些学习步骤&#xff0c;系统自学网络安全。 在学习之前&#xff0c;要给自己定一个目标或者思考一下要达到一个什么样的水平&#xff0c;是学完找工作&#xff08;…...

lua学习-2 常见运算符

文章目录 赋值运算符普通赋值多重赋值交换赋值 算数运算符常见符号标识 关系运算符常见符号标识TIP 逻辑运算符常见符号标识模拟三目运算 赋值运算符 普通赋值 a 1b "123"c truec "true"多重赋值 a,b 1,2 a,b,c 2,"ss" -- c的值为nil交换赋…...

【图像处理】使用 OpenCV 将您的照片变成卡通

图像到卡通 一、说明 在当今世界&#xff0c;我们被图像和视频所包围。从社交媒体到广告&#xff0c;图像已成为一种强大的交流媒介。但是你有没有想过&#xff0c;如果你能把你的照片变成卡通会发生什么&#xff1f;想象一下&#xff0c;为您最喜欢的照片创建动画版本&#xf…...

暖手宝UL认证 亚马逊UL测试报告 UL499测试项目

UL499测试内容&#xff1a;1、 漏电流测试 2、 输入测试 3、 潮态下漏电流测试4、正常温升测试 5、 耐高压测试 6、 稳定性测试7、异常测试&#xff08;DRY&#xff09;8、 异常测试  9、 静压及强度测试10、 烧熔断器测试、 电源线拉力测试11、 电源线推力测试12、 塑件变…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...