Table-升级依赖项后条纹不再工作

Question

所以我升级了 package.json，然后 table 样式的输出就关闭了。它曾经是条纹状的，table 中的每个单元格的背景颜色都发生了变化。我认为这可能是一个依赖性问题，因为我升级了其中的大部分。

这是更新后的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"
  }
}

这是对 table 组件进行条带化处理的旧 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 数据，就像这样...

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

Table-升级依赖项后条纹不再工作

Table-striped not working anymore after upgrading dependencies

html

css

json

angular-material

bootstrap-4