Html 如果用户是特定属性的所有者，则为其删除选项

我想为用户显示删除选项，如果他创建了相应的展示。我从getCurrentUser服务获取当前用户id，并获取一组展示，其中thre是一个字段用户id

我正在尝试将当前用户的id和Exhibies数组中的用户id进行匹配，如果存在匹配项，则只有用户才能获得Pertical exhibit的删除选项，但我无法以正确的方式进行匹配

下面是我的代码：

-------------------------------------------------------------------------------
  ngOnInit() {
    this.getCurrentUser();
    this.getIsSupervisor();
    this.spinnerService.show();
    let allRoutesOption = Route.emptyRoute();
    allRoutesOption.title = 'ALL';
    this.routes = [allRoutesOption];

    this.getAllExhibits();

    this.routeService.getAllRoutes(1, 100)
      .then(
        data => this.routes = this.routes.concat(data.items)
      ).catch(
        error => console.error(error)
      );

    this.getPage(1);

  }

  ngOnDestroy() {
    this.spinnerService.hide();
  }

  getIsSupervisor() {
    this.supervisorGuard.isSupervisor().then(
      (response: boolean) => {
        this.isSupervisor = response;
      });
  }

  getCurrentUser() {
    this.userService.getCurrent()
      .then(
        (response) => {
          this.currentUserId = response.id;
          this.exhibitService.getAllExhibits(1, this.maxNumberOfMarkers)
            .then(
              (data) => {
                this.allExhibits = data.items;
                for (let exhibit of this.allExhibits) {
                  this.exhibitsUserIds.push(exhibit.userId);
                    if (this.exhibitsUserIds !== this.currentUserId) {
                      this.canDelete = false;
                    } else {
                      this.canDelete = true;
                    }
                }
              }
            );
        }
      );
  }
-------------------------------------------------------------------------------

我的Html：

----------------------------------------
  <md-nav-list>
    <md-list-item [routerLink]="['/mobile-content/exhibits/view', exhibit.id]" ng-blur="true" *ngFor="let exhibit of exhibits | paginate: { id: 'server',
                                                                itemsPerPage: exhibitsPerPage,
                                                                currentPage: currentPage,
                                                                totalItems: totalItems }">
      <img md-list-avatar *ngIf="previewsLoaded && previews.has(exhibit.id); else exhibitIcon" [src]="previews.get(exhibit.id)"
        alt="{{ 'image preview' | translate }}" [ngStyle]="{'width.px': 48, 'height.px': 48}">
      <ng-template #exhibitIcon>
        <md-icon md-list-icon class="type-icon" [ngStyle]="{'font-size.px': 40, 'height.px': 40, 'width.px': 40}">place</md-icon>
      </ng-template>
      <h2 md-line>{{ exhibit.name }} ({{ exhibit.status | translate }})
        <hip-star-rating class="fix-position" *ngIf="exhibit.ratings" [rating]='exhibit.ratings' [exhibitId]='exhibit.id'></hip-star-rating>
      </h2>
      <p md-line>{{ exhibit.description }}</p>
      <p md-line>
        <span class="latitude">{{ exhibit.latitude }}</span>,
        <span class="longitude">{{ exhibit.longitude }}</span>
      </p>
      <p *ngIf="exhibit.tags.length > 0" md-line>
        <span *ngFor="let tag of exhibit.tags" class="tag-name">{{ tag }}</span>
      </p>

      <button md-icon-button click-stop-propagation color="primary" [routerLink]="['/mobile-content/exhibits/edit', exhibit.id]"
        title="{{ 'edit' | translate }}">
        <md-icon>{{ !inDeletedPage ? 'edit' : 'remove_red_eye'}}</md-icon>
      </button>
      <div *ngIf="canDelete">
        <button md-icon-button click-stop-propagation color="warn" (click)="deleteExhibit(exhibit)" *ngIf="!exhibit.used && !inDeletedPage"
          title="{{ 'delete' | translate }}">
          <md-icon>delete_forever</md-icon>
        </button>
      </div>
    </md-list-item>
----------------------------------------

---

有人能帮我弄清楚吗？

我对自己还不熟悉，但也许我还能帮上忙。我注意到一些可能会引起问题的事情

首先 当您迭代this.allExhibits时，我注意到this.canDelete只是您在每次迭代后不断重新分配的一个值。最后，它只表示最后一个展品的“可删除性”

也许您可以创建某种对象或数组来映射this.allExhibits的for..迭代。这样，您就可以存储this.canDelete的每个解析值，而不会在每次迭代中覆盖它

示例.component.ts example.component.html 其次 我假设getCurrentUser是组件实例化时发生的事情。在这种情况下，*ngIf必须等待this.canDelete的解析值，然后才能显示或隐藏删除按钮

由于getCurrentUser在组件对视图进行初始渲染后的某个时间出现解析，因此设置this.canDelete的值可能不会触发Angular的更改检测

也许可以在解析this.canDelete的最终值后尝试ChangeDetectorRef.detectChanges。ChangeDetectorRef可从@angular/core导入，并可在组件的构造函数中实例化：constructorprivate ChangeDetectorRef:ChangeDetectorRef{}

---

希望这有帮助

@John..我正试着照你说的做，但我还是做不到。我存储了所有展品的用户ID，然后尝试匹配条件，当我将其放入HTML时，所有展品的删除选项都消失了。我只有一个展品是由当前用户创建的，对于该展品，我只想删除选项。有没有可能用其他的方法？谢谢你的建议。@RuchirNaphade我在回答中包括了一个例子。通过直接在html中比较exhibit.id和currentUser.id，我省略了对this.canDelete的需要。让我知道这是否有帮助！当您必须考虑组件的子部分的多个行为时，约翰是正确的，那么您不能只使用一个变量。必须创建一个对象数组，其中包含每个案例的删除状态。像这样：allmycase=[{id:A，title:AAA，delete:false}，{}…]。。。

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  currentUser:object = {
    name: 'User A',
    id: 'A'
  };

  exhibits:object[] = [
    {
      title: 'Exhibit A',
      id: 'A'
    },
    {
      title: 'Exhibit B',
      id: 'B'
    },
    {
      title: 'Exhibit C',
      id: 'C'
    }
  ];

  constructor() { }

  deleteExhibit(index) {
    this.exhibits = this.exhibits.filter((_, i) => i != index);
  }
}

<div *ngFor="let exhibit of exhibits; let i=index">
  <h3>{{exhibit.title}}</h3>
  <button *ngIf="exhibit.id == currUser.id" (click)="deleteExhibit(i)">DELETE</button>
  <hr/>
</div>