javascript - 在嵌套数组上使用 ng-if 显示图标

Question

在这方面遇到麻烦。

我想检查用户是否已经为帖子添加了书签。如果有，我会显示一个添加的书签图标。

<div ng-repeat="post in posts>
<div ng-repeat="book in userbookmarks">
    <div ng-if="book.post.id === post.id">
        <i class="material-icons">
            bookmark_border
        </i>
        Added
    </div>
</div>
</div>

并添加书签

<div class="bookmark" ng-click="addBookmark()">
    <md-button>
        <i class="material-icons">bookmark</i>
    </md-button>
</div>

json 模型//

  function requestItem(){
getServiceData.get(function(data){
$scope.posts = data.posts;
$scope.current_user = data.current_user;
console.log($scope.posts);
console.log($scope.current_user);

})
 }

  var getBookmarks = bookmarkData.query();
    getBookmarks.$promise.then(function(data, status, headers, 
     config){
     $scope.bookmarks= data
      })

我尝试了一些使用三元组和 ng-if 的方法，但无法返回所需的行为。我的直觉是使用过滤器来检查 book.post 数组中是否存在 post.id 。然后在模板中使用 ng-if ，但是我无法完成此操作。我是 Angular 新手，希望得到任何帮助。

*为清楚起见进行编辑。这与模板显示有关，如果 post.id 位于用户书签数组内，我希望显示 bookmark_border。如果 book.post.id 不在用户的书签数组中，我希望显示书签并让用户能够 addBookmark()

Answer 1

这是一种可能的解决方案:

您的模板会循环浏览您的帖子，检查每一篇帖子是否位于已添加书签的帖子的用户列表中。如果是，您会看到“已添加”文本，否则您会看到一个书签按钮

    <div class="post" *ngFor="let post of posts">
       {{post.Text}}
      <div class="bookmark-button" *ngIf="!isBookmarked(post.Id)" (click)="addBookmark(post)">Bookmark</div>
      <div class="bookmark-button" *ngIf="isBookmarked(post.Id)">Added!</div>
    </div>

在您的组件中，您有帖子列表、用户和用于检查用户是否具有给定帖子并添加它的函数:

  user = {
      bookmarks: [];
    }

    posts = [
      {
        Id: 1,
        Text: "Woot Woot"
      },
      {
        Id: 2,
        Text: "Angular 4 the win!"
      },
      {
        Id: 3,
        Text: "Awesomesauce"
      }  
    ]

    addBookmark(post) {
      if(!this.isBookmarked(post.Id))
        this.user.bookmarks.push(post.Id);
    }

    isBookmarked(id){
      for(var i = 0; i < this.user.bookmarks.length; i++){
        if(this.user.bookmarks[i] === Number(id)){
          return true;
        }
      }
      return false;
  }

这是一个笨蛋: https://plnkr.co/edit/H2taatK19iS7E9uzL8oP