html - 升级依赖项后,表条带不再工作
问题描述
所以我升级了我的 package.json,之后表格样式的输出就关闭了。它曾经是条纹的,表格中的每个单元格都改变了背景颜色。我认为这可能是一个依赖问题,因为我升级了它们中的大多数。
这是更新的 package.json
{
"name": "pipeline-viewer",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.0.0",
"@angular/cdk": "^12.0.0",
"@angular/common": "^12.0.0",
"@angular/compiler": "^12.0.0",
"@angular/core": "^12.0.0",
"@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "^12.0.0",
"@angular/material": "^12.0.0",
"@angular/material-moment-adapter": "^12.0.0",
"@angular/platform-browser": "^12.0.0",
"@angular/platform-browser-dynamic": "^12.0.0",
"@angular/router": "^12.0.0",
"@wizpanda/super-gif": "0.0.5",
"angular-plotly.js": "^4.0.4",
"bootstrap": "^5.1.3",
"moment": "^2.29.1",
"plotly.js": "^2.5.1",
"rxjs": "^7.4.0",
"rxjs-compat": "^6.6.7",
"zone.js": "^0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.0.0",
"@angular/cli": "^12.0.0",
"@angular/compiler-cli": "^12.0.0"
}
}
这是具有条带表组件的旧 package.json
{
"name": "pipeline-viewer",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.3.7",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/flex-layout": "^7.0.0-beta.24",
"@angular/forms": "~7.1.0",
"@angular/material": "^7.3.3",
"@angular/material-moment-adapter": "^8.1.2",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"@wizpanda/super-gif": "0.0.5",
"angular-plotly.js": "^1.3.2",
"bootstrap": "^4.2.1",
"moment": "^2.24.0",
"plotly.js": "^1.49.0",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "~7.1.3",
"@angular/compiler-cli": "~7.1.0"
}
}
这是 HTML 的样子,以防我需要升级处理数据的方式
<table class="table col-lg-4 col-sm-6 col-xs-12 table-striped table-bordered table-sm" >
<tr>
<th>Lab Name</th><td>{{ session?.lab_name }}</td>
</tr>
<tr>
<th>Session Start Time</th><td>{{ session?.session_start_time.split("T")[0] }} {{ session?.session_start_time.split("T")[1] }}</td>
</tr>
<tr>
<th>Task Protocol</th><td>{{ session?.task_protocol }}</td>
</tr>
<tr>
<th>Session UUID</th><td>{{ session?.session_uuid }}</td>
</tr>
<tr>
<th>User</th><td>{{ session?.responsible_user }}</td>
</tr>
<tr>
<th>Session Project</th>
<td>{{ session?.session_project }}</td>
</tr>
</table>
解决方案
我必须在标签中包含表格数据,就像这样......
<table class="table col-lg-4 col-sm-6 col-xs-12 table-striped table-bordered table-sm">
<tbody>
<tr>
<th>Mouse Nickame</th>
<td><a routerLink="/mouse/{{session?.subject_uuid}}">{{ session?.subject_nickname }}</a></td>
</tr>
<tr>
<th>Mouse DOB</th>
<td>{{ session?.subject_birth_date }}</td>
</tr>
<tr>
<th>Mouse Line</th>
<td>{{ session?.subject_line }}</td>
</tr>
<tr>
<th>Mouse Sex</th>
<td>{{ session?.sex }}</td>
</tr>
<tr>
<th>Mouse UUID</th>
<td>{{ session?.subject_uuid }}</td>
</tr>
</tbody>
</table>
推荐阅读
- python - 如何使用指定的浏览器获取 url?
- matlab - Matlab 矩阵乘法返回它不应该返回的值
- php - Laravel URL 门面临时签名路由到外部 url
- python - Pandas 数据框将长字符串列动态操作为 2 列
- python - 在python中从头开始计算macd
- java - java - 如何从java中的json对象循环读取信息?
- php - 使用 strtotime 转换 ISO 日期时间是否安全
- vue.js - Vuetify 使用一个搜索/组合框来实现像 Gmail 一样的多重过滤
- azure-devops - 如何在 Azure DevOps 发布管道中集成任务以执行 OWASP ZAP 扫描和身份验证?
- python - 自定义 Dask 调度程序与客户端