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

  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的一些方法但是还没有能够返回所需的行为。我的直觉是使用过滤器检查post.id是否存在于book.post数组中。然后在模板中使用ng-if，但是我无法完成此操作。我是棱角分明的新人，非常感谢任何帮助。

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

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

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

1 个答案: