angular - 如何在角度模板中显示异步函数输出

Question

实际上我正在尝试构建一个社交媒体应用程序，我想检查帖子是否已经被喜欢，以便我可以在这里禁用按钮，我到目前为止所做的事情：

后组件

export class PostsComponent implements OnInit {
  posts;
  socket;
  user;
  constructor(private authService: AuthService, private postService: PostService) {
    this.socket = io('http://localhost:3000')
  }

  fromNowDate(date) {
    return moment(date).fromNow()
  }
  ngOnInit() {
    this.user = this.authService.getUser()
    console.log(this.user)
    this.getAllPost()
    this.socket.on('refreshPage', data => {
      this.getAllPost()
    })
  }

  getAllPost() {
    this.postService.getPosts().subscribe(post => {
      this.posts = post
      console.log(this.posts)

    })
  }

  likePost(post) {
    console.log(post)
    this.postService.likePost(post).subscribe(data => {
      this.socket.emit('refresh', { data: 'refresh the postss' })
      console.log(data)
    })
  }

  isLikedPost(post, userID) {
    post.find(post => {
      console.log(post.userID == userID)
      return post.userID == userID
    })
  }

}

正如您在Post 组件中看到的那样，有一个isLikedPost()函数，它将 post 和 userID 作为参数。

所以我在我的模板中使用这个功能

<div *ngFor="let post of posts">
    <ul class="collection" style="border: none;">
        <li class="collection-item avatar">
            <img src="https://via.placeholder.com/150" alt="" class="circle">
            <span class="title">{{post.user.username}}</span>
            <p>Username<br>
                {{fromNowDate(post.createdAt)}}
            </p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
        </li>

        <div class="row">
            <div class="col s12 m12">
                <div class="card">
                    <div class="card-image" style="width: 30%; left: 35%;">
                        <img src="https://via.placeholder.com/150" style="padding-top: 20px;">

                    </div>
                    <!-- <span class="card-title">Card Title</span> -->
                    <div class="card-content">
                        <p>{{post.post}}</p>
                    </div>
                    <div class="card-action">
                        <i class="material-icons" style="cursor: pointer;" (click)="likePost(post)">thumb_up </i><span
                            style="position: absolute; margin-left: 5px;">{{post.likes.length}}</span>
                            <p>{{isLikedPost(post.likes, user.user._id)}}</p> //<-- here the function is used
                        <i class="material-icons" style="margin-left: 35px; cursor: pointer;">comment </i><span
                            style="position: absolute; margin-left: 5px;">{{post.comments.length}}</span>

                    </div>
                </div>
            </div>
        </div>

    </ul>
</div>

我的问题是我没有得到这个函数的任何输出。帮助

标签： angular

Answer 1

  isLikedPost(post :Post[], userID) : boolean{

    return post.some(post => {
      console.log(post.userID == userID)
      return post.userID == userID
    });
  }