MEAN栈存储应用Angular跨组件复用MongoDB存储桶数据问题咨询

修正说明 #

你目前已经完成了核心逻辑的迁移：将Bucket数据定义、readBucket数据拉取、removeBucket删除方法都复制到了StorageComponent中，基础逻辑没有问题，只需要调整storage.component.html的两处小问题，即可实现和bucket-list组件结构一致、仅前端样式有差异的表格展示：

• 补全table标签的*ngIf="Bucket.length > 0"判断，避免无数据时空表格和空数据提示同时展示
• 注释掉多余的bucket._id展示列，和bucket-list的表格结构对齐
• 新增自定义样式类即可调整表格外观，无需修改结构逻辑

修正后完整代码 #

storage.component.html #

<div class="row justify-content-center">
  <h3 class="left" style="margin-left: 25%; margin-top: 20px;">MyNewStorage</h3>
  <div class="col-md-4 register-employee">
        <br><br>
        <h4>上传图片到云存储</h4>
        <input type="file" (change)="onFileSelected($event)">
        <br><br>
        <button type="button" class="btn btn-primary" (click)="onUpload()">上传对象</button>
      </div>
</div>

<!-- 以下为和bucket-list结构一致的表格，修改css类即可自定义样式 -->
<p *ngIf="Bucket.length <= 0" class="no-data text-center">暂无bucket数据！</p>
<h3 class="left">全部Bucket (共{{Bucket.length}}个)</h3>
<div class="btn btn-primary right">
<a class="teksta" routerLinkActive="active" routerLink="/create-bucket">新建Bucket</a>
</div>
<table class="table table-border storage-bucket-table" *ngIf="Bucket.length > 0">
  <thead class="table">
    <tr>
      <!--<th scope="col">Bucket ID</th>-->
      <th scope="col">名称</th>
      <th scope="col">存储位置</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let bucket of Bucket; let i = index">
      <!-- 注释ID列，和bucket-list结构对齐 -->
      <!--<th scope="row">{{bucket._id}}</th>-->
      <td routerLink="/storage" class="klikni">{{bucket.name}}</td>
      <td>{{bucket.location}}</td>
      <td class="text-center">
        <span class="delete" (click)="removeBucket(bucket, i)">
          <button type="button" class="btn btn-danger btn-sm">删除</button>
        </span>
      </td>
    </tr>
  </tbody>
</table>

样式调整方法 #

在storage.component.css文件中，为新增的storage-bucket-table类编写自定义样式规则，即可实现和bucket-list组件不一样的展示效果，不会影响原有结构逻辑。

可选优化建议 #

如果后续还有其他组件需要复用Bucket表格逻辑，建议将表格封装为通用的app-bucket-table组件，通过@Input传入样式类、是否展示操作按钮等配置项，避免重复编写相同的逻辑和结构代码。

内容的提问来源于stack exchange，提问作者devZ