Question

我有一个显示这些帖子的模板：

Enter a (non-negative) number:
<input type="text" pattern="\d*[.]*\d{0,3}" id="addNum">

删除功能正在使用名为servicePost的服务删除帖子

<div class="card mb-3" *ngFor="let post of posts">
  <div class="card-body">
    <h5 class="card-title">{{post.title}}</h5>
    <p class="card-text">{{post.body}}</p>
    <button (click)="removePost(post)" class="btn btn-danger"><i class="fa fa-remove"></i></button>
    <button (click)="editPost(post)" class="btn btn-light"><i class="fa fa-pencil"></i></button>
  </div>
</div>

服务本身

removePost(post: Post) {
    if (confirm('Are you sure?')) {
      this.postService.removePost(post.id).subscribe(() => {
        this.posts.forEach((current, index) => {
          if (post.id === current.id) {
            this.posts.splice(index, 1);
          }
        });
      });
    }
  }

我真的不明白这部分：

export class PostService {
      postsUrl: string = 'https://jsonplaceholder.typicode.com/posts';

      constructor(private http: HttpClient) { }

      removePost(post: Post | number): Observable<Post> {
        const id = typeof post === 'number' ? post : post.id;
        const url = `${this.postsUrl}/${id}`;

        return this.http.delete<Post>(url, httpOptions);  
      }

到目前为止，我已经了解到作者正在尝试提取removePost(post: Post | number): Observable<Post> { const id = typeof post === 'number' ? post : post.id;，以便他们可以使用它来组合post.id并删除记录。

我不明白上面的代码是如何工作的。有什么想法吗？

Answer 1

通过点击<button (click)="removePost(post)" ...>

触发删除帖子

removePost方法依次调用postService.removePost，后者发出HTTP请求并返回响应的Observable。

用这种方法...

TypeScript允许您定义多种类型。因此，在这种情况下，帖子的类型必须为“帖子”或类型号。

如果帖子是数字类型，则将id设置为给定的数字。如果它是Post类型，则使用post对象（post.id）中的id属性。

removePost(post: Post | number): Observable<Post> {
const id = typeof post === 'number' ? post : post.id;

然后，最后，在removePost方法的.subscribe（）块中，收到HTTP响应（但被忽略）。仅在HTTP成功时才调用subscription中的函数，这意味着在后端服务器上已进行了删除。因此，他做了一个拼接，从前端数据中删除帖子。

Answer 2

removePost(post: Post | number)

这是一个带有一个参数的函数。该参数可以是Post对象或简单数字。

const id = typeof post === 'number' ? post : post.id;

这部分决定如何确定ID。假定参数是数字，即ID本身，而如果给它一个对象，则它必须从该对象的属性中获取它，因此它必须检查类型以知道执行该方法的方式。如果三元语法使您感到困惑，则可以将其大致重写为：

let id // changed to let because you can't declare a const without assigning it immediately
if (typeof post === 'number') {
    id = post
} else {
    id = post.id
}

我正在尝试理解这段TypeScript代码

2 个答案: