0

这个有问题。

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

<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 的方法，但无法返回所需的行为。我的直觉是使用过滤器来检查 post.id 是否存在于 book.post 数组中。然后在模板中使用 ng-if，但是我无法做到这一点。我是 Angular 新手，希望有任何帮助。

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

4

1 回答 1

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

于 2017-09-19T20:10:18.907 回答