用nz-tabel寫一個合并表格

用nz-tabel寫一個合并表格

		<nz-table #basicTable [nzData]="tableSearchStatus.dataList" nzBordered><thead><tr><th>班級</th><th>姓名</th><th>年齡</th><th>電話</th></tr></thead><tbody><!-- 使用 ng-container 進行循環 --><ng-container *ngFor="let classItem of basicTable.data; let i = index"><!-- 第一行:班級名稱和第一個學生的詳細信息 --><tr *ngIf="classItem.students.length > 0"><td [attr.rowspan]="classItem.students.length">{{ classItem.className }}</td><td>{{ classItem.students[0].name }}</td><td>{{ classItem.students[0].age }}</td><td>{{ classItem.students[0].phone }}</td></tr><!-- 后續行:其余學生的詳細信息 --><tr *ngFor="let student of classItem.students.slice(1)"><td>{{ student.name }}</td><td>{{ student.age }}</td><td>{{ student.phone }}</td></tr><!-- 如果沒有學生,則單獨一行顯示班級信息 --><tr *ngIf="classItem.students.length === 0"><td>{{ classItem.className }}</td><!-- 也可以不合并  在追加兩個td --><td colspan="3">無學生信息</td></tr></ng-container></tbody></nz-table>
tableSearchStatus.dataList = [{className: "301班",students: [{ name: "aa1", age: 11, phone: "1231231222" },{ name: "aa2", age: 11, phone: "1231231233" },{ name: "aa3", age: 11, phone: "12312312333" },{ name: "aa4", age: 11, phone: "1231231233333" },{ name: "aa5", age: 11, phone: "123123122222" },],},{className: "12班",students: [{ name: "aa1", age: 11, phone: "12312312" },{ name: "aa2", age: 11, phone: "12312312" },],},{className: "322班",students: [{ name: "aa", age: 11, phone: "12312312" },{ name: "aa", age: 11, phone: "12312312" },],},{className: "3111班",students: [],},{className: "233班",students: [{ name: "aa", age: 11, phone: "12312312" },{ name: "aa", age: 11, phone: "12312312" },],},];

在這里插入圖片描述

 	 <table border="1"><thead><tr><th>班級</th><th>姓名</th><th>年齡</th><th>電話</th></tr></thead><tbody><ng-container *ngFor="let classItem of tableSearchStatus.dataList"><tr *ngIf="classItem.students.length > 0; else noStudentsTemplate"><td [attr.rowspan]="classItem.students.length">{{ classItem.className }}</td><td>{{ classItem.students[0].name }}</td><td>{{ classItem.students[0].age }}</td><td>{{ classItem.students[0].phone }}</td></tr><tr *ngFor="let student of classItem.students.slice(1)"><td>{{ student.name }}</td><td>{{ student.age }}</td><td>{{ student.phone }}</td></tr><ng-template #noStudentsTemplate><tr><td>{{ classItem.className }}</td><td colspan="3">無學生信息</td></tr></ng-template></ng-container></tbody></table>

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/907708.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/907708.shtml
英文地址,請注明出處:http://en.pswp.cn/news/907708.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

第6章 放大電路的反饋

本章基本要求 會判&#xff1a;判斷電路中有無反饋及反饋的性質 會算&#xff1a;估算深度負反饋條件下的放大倍數 會引&#xff1a;根據需求引入合適的反饋 會判振消振&#xff1a;判斷電路是否能穩定工作&#xff0c;會消除自激振蕩。 6.1 反饋的概念及判斷 一、反饋的…

ansible template 文件中如果包含{{}} 等非ansible 變量處理

在 Ansible 模板中&#xff0c;如果你的 Python 腳本里有大量 {}、f""、或者其他 Jinja 會誤解析的語法&#xff0c;就需要用 {% raw %}…{% endraw %} 把它們包起來&#xff0c;只在需要替換變量的那一行單獨“放行”。例如&#xff1a; {% raw %} #!/usr/bin/env …

STM32G4 電機外設篇(一) GPIO+UART

目錄 一、STM32G4 電機外設篇&#xff08;一&#xff09; GPIOUART1 GPIO1.1 STM32CUBEMX 配置以及Keil代碼1.2 代碼和實驗現象 2 UART2.1 STM32CUBEMX 配置以及Keil代碼2.2 代碼和實驗現象 附學習參考網址歡迎大家有問題評論交流 (* ^ ω ^) 一、STM32G4 電機外設篇&#xff0…

Kotlin 中集合遍歷有哪幾種方式?

1 for-in 循環&#xff08;最常用&#xff09; val list listOf("A", "B", "C") for (item in list) {print("$item ") }// A B C 2 forEach 高階函數 val list listOf("A", "B", "C") list.forEac…

尚硅谷redis7 99 springboot整合redis之連接集群

6381宕機&#xff0c;手動shutdown后在redis中&#xff0c;634自動上位變成master結點。 但是在springboot中卻沒有動態感知道redisCluster的最新集群消息&#xff0c;所以找不到我們要檢索的數據。原因是&#xff1a;SpringBoot 2.X版本,Redis默認的連接池采用 Lettuce&#…

AI 的早期萌芽?用 Swift 演繹約翰·康威的「生命游戲」

文章目錄 摘要描述題解答案題解代碼分析示例測試及結果時間復雜度空間復雜度總結 摘要 你有沒有想過&#xff0c;能不能通過簡單的規則模擬出生與死亡&#xff1f;「生命游戲」正是這樣一種充滿魅力的數學模擬系統。這篇文章我們來聊聊它的規則到底有多神奇&#xff0c;并用 S…

web ui自動化工具playwright

playwright是微軟開源的一款web ui自動化工具&#xff0c;該工具有很多亮點&#xff0c;解決以前困擾web UI自動化測試的很多難點。這篇博客將介紹playwright主要特點。 playwright支持錄制減少了編寫成本 如果要使用playwright的錄制功能&#xff0c;有兩種途徑&#xff0c;途…

移動安全Android——客戶端靜態安全

一、反編譯保護 測試工具 Jadx GitHub - skylot/jadx: Dex to Java decompiler PKID [下載]PKID-APP查殼工具-Android安全-看雪-安全社區|安全招聘|kanxue.com 測試流程 &#xff08;1&#xff09;通過Jadx對客戶端APK文件進行反編譯&#xff0c;觀察是否進行代碼混淆 &…

04-redis-分布式鎖-edisson

1 基本概念 百度百科&#xff1a;控制分布式系統之間同步訪問共享資源方式。 在分布式系統中&#xff0c;常常需要協調他們的動作。如果不同的系統或是同一個系統的不同主機之間共享了一個或一組資源&#xff0c;那么訪問這些資源的時候&#xff0c;往往需要互斥來防止…

cf每日刷題

目錄 String&#xff08;800&#xff09; Skibidus and Amogu&#xff08;800&#xff09; Apples in Boxes&#xff08;1100&#xff09; String&#xff08;800&#xff09; https://codeforces.com/problemset/problem/2062/A #include <iostream> #include <…

AWS WebRTC:獲取ICE服務地址(part 1)

建立WebRTC連接的第二步是獲取ICE服務地址。 ICE全稱&#xff1a;Interactive Connectivity Establishment&#xff0c;建立互動連接。 ICE 服務地址&#xff0c;主要是 TURN 和 STUN 服務器的地址&#xff0c;用于 WebRTC 在 NAT 網絡環境中協商建立連接。 上代碼&#xff…

Python興趣匹配算法:從理論到實戰的進階指南

目錄 一、興趣匹配算法的技術棧解析 1. 基礎特征匹配階段 2. 向量空間模型階段 3. 深度學習階段 二、工程化實踐關鍵技術 1. 特征工程體系 2. 相似度計算優化 三、典型應用場景實現 1. 社交好友推薦系統 2. 電商商品推薦系統 四、性能優化與挑戰應對 1. 計算性能優…

【C語言】講解 程序分配的區域(新手)

目錄 代碼區 數據區 堆區 棧區 常量區 重點比較一下堆區與 棧區 總結&#xff1a; 前言&#xff1a; C語言程序的內存分配區域是理解其運行機制的重要部分。根據提供的多條證據&#xff0c;我們可以總結出C語言程序在運行時主要涉及以下五個關鍵內存區域&#xff1a; 代…

Go語言之接口與多態 -《Go語言實戰指南》

接口是 Go 語言實現 多態 的核心機制。本章將幫助你理解接口的設計哲學、動態行為&#xff0c;以及它如何讓 Go 實現面向接口編程的能力。 一、什么是接口&#xff1f; 接口是一組方法簽名的集合&#xff0c;任何類型只要實現了接口中聲明的所有方法&#xff0c;就被視為實現了…

JSR 303(即 Bean Validation)是一個通過??注解在 Java Bean 上定義和執行驗證規則??的規范

&#x1f6e0;? 一、JSR 303是什么&#xff1f; JSR 303&#xff08;Java Specification Requests 303&#xff09;是Java EE 6的子規范&#xff0c;全稱??Bean Validation??。它通過注解方式對JavaBean的屬性值進行標準化校驗&#xff0c;例如檢查非空、長度、格式等規則…

【圖像處理入門】3. 幾何變換基礎:從平移旋轉到插值魔法

摘要 掌握圖像的幾何變換相當于學會「圖像的空間魔法」。本文將帶你理解平移/旋轉/縮放的數學原理&#xff0c;掌握OpenCV中warpAffine和getAffineTransform的核心用法&#xff0c;對比最近鄰、雙線性等插值算法的優劣。通過圖像翻轉、鏡像、透視變換實戰&#xff0c;學會用變…

微信小程序學習目錄

個人簡介 &#x1f468;?&#x1f4bb;?個人主頁&#xff1a; 魔術師 &#x1f4d6;學習方向&#xff1a; 主攻前端方向&#xff0c;正逐漸往全棧發展 &#x1f6b4;個人狀態&#xff1a; 研發工程師&#xff0c;現效力于政務服務網事業 &#x1f1e8;&#x1f1f3;人生格言&…

QT 5.15.2 程序中文亂碼

1. 在.pro文件中添加&#xff1a; msvc { QMAKE_CXXFLAGS /source-charset:utf-8 /execution-charset:utf-8 }備注&#xff1a;.pro文件只有在選擇 qmake 方式才會生成。 [Cmake 只會生成 CMakeLists.txt 文件] 2. 在文件首部增加以下程序行 #pragma execution_character_s…

Unity UI設計優化與模式原則

前言 在 Unity 中設計高效且可維護的 UI 系統時&#xff0c;需要結合性能優化和設計模式兩大核心方向。以下是關鍵原則及實踐方法&#xff1a; 對惹&#xff0c;這里有一個游戲開發交流小組&#xff0c;希望大家可以點擊進來一起交流一下開發經驗呀&#xff01; 一、UI 性能…

CppCon 2014 學習: The Implementation of Value Types

“The Implementation of Value Types” 在C里&#xff0c;通常指的是如何設計和實現**值類型&#xff08;value types&#xff09;**的類&#xff0c;確保它們符合值語義&#xff08;value semantics&#xff09;&#xff0c;也就是說&#xff1a; 對象的賦值和拷貝操作應該是…