升级依赖项后，表条带不再工作

Question

所以我升级了我的 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>

Answer 1

我必须在标签中包含表格数据，就像这样......

<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>