Question

我使用角度6中的JSONPLACEHOLDER API实现了CRUD操作。应用程序工作正常，但我遇到更新和删除问题。

应用程序流程：所有帖子可见初始，然后点击按钮：

点击查看（将我们带到特定的id相关数据）
更新（带我们更新表格）
删除（应删除该特定对象）

问题1：

现在jsonplaceholder有100个假对象。当我添加新对象时，我将在我的所有帖子中显示，但我无法在我的视图中查看（点击查看选项）。

问题2：

我可以在控制台中看到它正在更新但它没有在所有帖子中显示。在控制台中获取此信息（表单提交已取消，因为表单未连接）

问题3：

删除特定对象时，数组中的最后一个对象会被删除，但我想删除该特定对象。

app.component.html

<h1>{{apptitle}}</h1>
<!--  -->
<main *ngIf="!some; else elseBlock">
    <div *ngIf="!something; else elseBlock2">
        <button (click)="addto()">click to add post</button>
        <br>
        <br>
        <hr>
        <h2>total no of posts:
            <span>{{data.length}}</span>
        </h2>
        <br>
        <br>
        <hr>
        <div *ngIf="!someupdate; else elseBlock3">
            <br>
            <br>
            <hr>
            <div *ngIf="!somedelete; else elseBlock4">
                <section *ngFor="let dt of data">
                    <aside>ID:
                        <span id="id">{{dt.id}}</span>
                    </aside>
                    <aside>Title: {{dt.title}}</aside>
                    <button (click)="linkto(dt.id)">click to view</button>
                    <br>
                    <hr>
                    <button (click)="updto(dt.id)">update</button>
                    <br>
                    <hr>
                    <button (click)="delto(dt.id)">delete</button>
                    <br>
                    <hr>
                </section>
            </div>
            <ng-template #elseBlock4>
                <section>
                    <div> That Perticular ID's Data is Deleted</div>
                    <!-- <button(click)="delto(data2.id)">delete it</button> -->
                    <!-- <button (click)="delto(data2.id)">back</button> -->

                </section>
            </ng-template>
        </div>
        <ng-template #elseBlock3>
            <section>
                <form (ngSubmit)="updateit(data4.id)">
                    <p>UserID: {{ data4.userId }}
                        <input type="number" [(ngModel)]="userId" name="userId" placeholder="userId">
                    </p>
                    <p>Title:
                        <input type="text" [(ngModel)]="title" name="title" placeholder="title">
                    </p>
                    <p>Body:
                        <input type="text" [(ngModel)]="body" name="body" placeholder="body">
                    </p>
                    <input type="submit" (click)="updto(data4.id)">
                    <br>
                    <hr>

                </form>
            </section>
        </ng-template>

    </div>
    <ng-template #elseBlock2>
        <section>
            <form (ngSubmit)="postit()">
                <p>UserID:
                    <input type="number" [(ngModel)]="userId" name="userId" placeholder="userId">
                </p>
                <p>Title:
                    <input type="text" [(ngModel)]="title" name="title" placeholder="title">
                </p>
                <p>Body:
                    <input type="text" [(ngModel)]="body" name="body" placeholder="body">
                </p>
                <button type="submit"> post it</button>
                <br>
                <hr>
            </form>
        </section>

    </ng-template>

</main>
<ng-template #elseBlock>
    <section>
        <aside>ID: {{data2.id}}</aside>
        <aside>Title: {{data2.title}}</aside>
        <aside>Body: {{data2.body}}</aside>
        <button (click)="linkto(data2.id)">back</button>
        <br>
        <hr>
    </section>
</ng-template>

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  apptitle = 'app';
  data: any = [];
  data2: any = {};
  data3: any = [];
  data4: any = {};
  id: any;
  userId: any;
  title: string;
  body: string;
  some: boolean;
  something: boolean;
  someupdate: boolean;
  somedelete: boolean;

  constructor(private http: HttpClient) {
    this.showPost();
  }
  // Get Data
  linkto(id) {
    this.showPostbyId(id);
    this.some = !this.some;
  }
  showPost() {
    this.http.get('https://jsonplaceholder.typicode.com/posts')
      // clone the data object, using its known Config shape
      .subscribe(data => {
        console.log('posts data', data);
        this.data = data
      });
  }
  showPostbyId(id) {
    this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .subscribe(data2 => {
        this.data2 = data2;
      });
  }

  // Post Data
  addto() {
    this.something = !this.something;
  }
  postit() {
    const newConfig = {
      userId: this.userId,
      title: this.title,
      body: this.body,
      id: this.data.length + 1
    };
    this.http.post('https://jsonplaceholder.typicode.com/posts', newConfig)
      .subscribe(data => {
        this.data.push(newConfig)
        console.log('dataaaaaaaaaaaaaaaaaaaaa', data)
        this.something = !this.something;
      });
  }

  // Update Data
  updto(id) {
    this.updateit(id);
    this.someupdate = !this.someupdate;
  }
  updateit(id) {
    const newConfig = {
      userId: this.userId,
      title: this.title,
      body: this.body,
      id: this.id
    };
    this.http.patch(`https://jsonplaceholder.typicode.com/posts/${id}`, newConfig)
      .subscribe(data4 => {
        this.data4 = data4;
        console.log('dataaaaaaaaaaaaaaaaaaaaa5', data4)
      });
  }

  // Delete Data
  delto(id) {
    this.deleteit(id);
    this.somedelete = !this.somedelete;
  }
  deleteit(id) {
    this.http.delete(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .subscribe(data => {
        console.log('data2222222222222222', id)
        let index = this.data.indexOf(id);
        this.data.splice(index, 1);
        this.somedelete = !this.somedelete
      });
  }
}

使用Jsonplaceholder api更新和删除Angular中的问题

0 个答案: