如何使用 Typescript 或 Html 在 Angular 4/6 中隐藏和跳过数组字符串的元素答案

【问题标题】：How to Hide and Skip Element of an Array String in Angular 4/6 using Typescript or Html如何使用 Typescript 或 Html 在 Angular 4/6 中隐藏和跳过数组字符串的元素
【发布时间】：2018-12-18 18:14:12
【问题描述】：

我在单击项目列表（分支）时实现了一项功能，单个特定项目（分支）应该被删除或只是从（分支）列表中隐藏并再次显示为选定（分支）的另一个地方点击另一个项目列表（分支列表）而不是选定（分支）交换，它工作正常，但项目列表（分支列表项目）尚未删除？？

[ "开发分支", “产品分支”， "UATB 分支", “SIT分支”， “QA 分支”，] 上面给出的项目是分支列表当前选择的分支是 ["DevBranch"] 在下面给出的图片中，我添加仅供参考 NewBranch12 仍在该列表中

ngOnInit() {
    this._branchService.getAllBranch().subscribe(branchList => {
      this.branchList = branchList;
    }, error => this.error = error);
    console.log(this.branchList.length);
    this._branchService.getCurrentBranch().subscribe(currentBranch => {
      this.branchName = currentBranch.slice(34);
    }, error => this.error = error);

    const index: number = this.branchList.indexOf(this.branchName);
    if (index !== -1) {
        this.branchList.splice(index, 1);
    }
  }

HTML 代码

<mat-card>
  <mat-card-content  class ="branch">
    <div class="container">
      <table class="table">
        <thead>
          <th>Current Branch</th>
        </thead>
        <tr>
              <td><b>{{branchName}}</b></td>
        </tr>

      </table>
    </div>
  </mat-card-content>

  <mat-card-content class ="branch">
    <div class="container">
      <table class="table">
        <thead>
          <th>List Of Branches</th>
        </thead>
        <tr *ngFor="let branch of branchList">
          <td><b>{{branch}}</b></td>
        </tr>
      </table>
    </div>
  </mat-card-content>
</mat-card>

【问题讨论】：

什么。请保持简单，给出你拥有的输出和你期望的输出。另外，不要发布您的问题/期望的图片，因为有些人有公司代理（而且您似乎可以避免使用图片），并提供 minimal reproducible example 重现您的问题。

标签： html angular typescript angular6

【解决方案1】：

我可能会朝这个方向思考：

const all$ = this._branchService.getAllBranch();
const current$ = this._branchService.getCurrentBranch();

combineLatest(all$, current$).pipe(
    map(([all, current]) => all.filter(branch => branch !== current))
).subscribe(branchList) => {
    this.branchList = branchList;
})

【讨论】：