通过id进行编辑在Angular中不起作用，尽管通过的路线是正确的

Question

我想在用户正在编辑但无法正常工作时编辑并在表单中显示值。 Angular前端正在捕获正确的路由，但是没有从后端获取数据，并且没有api被调用。内容未显示在浏览器上。如果您想看看https://github.com/tridibc2/blog-admin-mean，我也会加入git仓库链接。编辑路径为[http://localhost:4200/admin/blog，然后单击编辑按钮。下面我附上edit-blog.component.html代码

    <h3>Edit this blog</h3>
    <div class="row" style="text-align:left">
      <div class="col-md-12">
        <form #createBlogForm="ngForm" (ngSubmit)="editThisBlog()">

          <div class="form-group">


            <label>Blog Title</label>
            <input type="text" name="blogTitle" [(ngModel)]="currentBlog.title" #title="ngModel" class="form-control" placeholder="Enter blog Title"
              required>

          </div>
          <div [hidden]="title.valid || title.pristine" class="alert alert-danger">
           Blog Title is required 
          </div>

          <div class="form-group">
            <label>Description</label>
            <input type="text" name="blogDescription" [(ngModel)]="currentBlog.description" #description="ngModel" class="form-control" placeholder="Enter Description"
              required>
          </div>
          <div class="form-group">
            <label>Enter the blog body</label>
            <textarea name="blogBodyHtml" [(ngModel)]="currentBlog.bodyHtml" #bodyHtml="ngModel" class="form-control" rows="3" required></textarea>
          </div>
          <div class="form-group">
            <label>Category</label>
            <select [(ngModel)]="currentBlog.category" #category="ngModel" name="blogCategory" class="form-control" id="category" required>
                  <option *ngFor="let category of possibleCategories" [value]="category">{{category}}</option>
                </select>
          </div>


          <button type="submit" class="btn btn-default" [disabled]="!createBlogForm.form.valid">Edit the blog</button>
        </form>
      </div>

    </div>

  </div>

edit-blog.component.ts

import { ActivatedRoute, Router } from '@angular/router';
import { BlogpostService } from 'src/app/client/blogpost.service';
import { ToastsManager } from 'ng6-toastr/ng2-toastr';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-edit-blog',
  templateUrl: './edit-blog.component.html',
  styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {

  public currentBlog;
  public possibleCategories = ["Comedy", "Action", "Drama", "Technology","Cooking","Travel"];

  constructor(private blogpostService: BlogpostService, private _route: ActivatedRoute, private router: Router, public toastr: ToastsManager) { }

  ngOnInit() {

    console.log("blogedit ngOnInIt called");
    let myBlogId = this._route.snapshot.paramMap.get('blogId');
    console.log(myBlogId);
     this.blogpostService.getSingleBlogInformation(myBlogId).subscribe(

                data =>{
                  console.log(data);
                  this.currentBlog = data;
                  console.log(this.currentBlog);
                  },

                error =>{
                  console.log("some error occured");
                  console.log(error.errorMessage);

                })
  }

  public editThisBlog(): any {
    this.blogpostService.editBlog(this.currentBlog.blogId, this.currentBlog).subscribe(

      data =>{
        console.log(data);
        this.toastr.success('Blog Edited Successfully.', 'Success!');
        setTimeout(() =>{
          this.router.navigate(['/blog', this.currentBlog.blogId]);
        }, 1000)
      },
      error =>{
        console.log(error);
        console.log(error.errorMessage);
        this.toastr.error('Some Error Occured.', 'Oops!');
      }
    )

  }

}

服务代码

import { catchError } from 'rxjs/operators';
import { HttpClient, HttpErrorResponse, HttpBackend, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { throwError } from 'rxjs';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';

@Injectable({
  providedIn: 'root'
})
export class BlogpostService {

  public allBlogs;
  public currentBlog;
  errorData: {};
  isLoggedIn = false;

  public baseUrl = 'http://localhost:4000/api/v1/blogs';


  constructor(private _http:HttpClient, private handler: HttpBackend) { }

  public getAllBlogs(): any {
    let myResponse = this._http.get(this.baseUrl + '/all').pipe(
      catchError(this.handleError)
    );
    console.log(myResponse);
    return myResponse;
   }

   public getSingleBlogInformation(currentBlogId): any {
    let myResponse = this._http.get(this.baseUrl + '/view/' + currentBlogId).pipe(
      catchError(this.handleError)
    );
    return myResponse;
  }

  public createBlog(blogData): any {
    let myResponse = this._http.post(this.baseUrl + '/create', blogData);
    return myResponse;

  }

  public deleteBlog(blogId): any {
    let data = {}
    let myResponse = this._http.post(this.baseUrl + '/' + blogId + '/delete', blogId);
    return myResponse;

  }

  public editBlog(blogId, blogData): any {
    let myResponse = this._http.put(this.baseUrl + '/edit' + '/' + blogId, blogData);
    return myResponse;
  }

  public getUserInfoFromLocalStorage: any = () =>{
    return JSON.parse(localStorage.getItem('userInfo'));
  }

  public setUserInfoInLocalStorage: any = (data) =>{
    localStorage.setItem('userInfo', JSON.stringify(data))
  }

  public signinFunction(data): Observable<any>{

    const params = new HttpParams()

    .set('email', data.email)
    .set('password', data.password)


    return this._http.post(`${this.baseUrl}/login`, params);
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    this.errorData = {
      errorTitle: 'Oops! Request for document failed',
      errorDesc: 'Something bad happened. Please try again later.'
    };
    return throwError(this.errorData);
  }

}

编辑api的节点控制器代码

    BlogModel.findOne({ 'blogId': req.params.blogId }, (err, result) => {

        if (err) {
            console.log(err)
            res.send(err)
        } else if (result == undefined || result == null || result == '') {
            console.log('No Blog Found')
            res.send("No Blog Found")
        } else {

            result.views += 1;
            result.save(function (err, result) {
                if (err) {
                    console.log(err)
                    res.send(err)
                }
                else {
                    console.log("Blog updated successfully")
                    res.send(result)

                }
            });// end result

        }
    });
}

路线

app.put(baseUrl+'/edit/:blogId',blogController.editBlog);

数据对象是这样的

{"title":"Blog Title 2 Custom","description":"Blog description 2 Custom","bodyHtml":"<h3>Heading of the body CUSTOM</h3><p>This is the first blog data getting uploaded n blog project</p>","views":5,"isPublished":true,"category":"tech","author":"Decardo","tags":["english movies, action movies, comedy"],"_id":"5e1120d223416207d8ae5e1b","blogId":"nbfO8hJp","created":"2020-01-04T23:33:38.000Z","lastModified":"2020-01-04T23:33:38.000Z","__v":0}

Answer 1

只需像这样固定编辑按钮的路径：

<a [routerLink]="['/admin/edit', blog.blogId]" class="btn btn-info btn-sm">Edit</a>

在API部分上前进，您的编辑方法不完整，因为您没有使用新值更新找到的对象。

let editBlog = (req, res) => {
    const data = req.body;
    BlogModel.findOne({ 'blogId': req.params.blogId }, (err, result) => {

        if (err) {
            console.log(err)
            res.send(err)
        } else if (result == undefined || result == null || result == '') {
            console.log('No Blog Found')
            res.send("No Blog Found")
        } else {
          for (let key in data) {
            result[key] = data[key];
          }
          result.views += 1;
            result.save(function (err, result) {
                if (err) {
                    console.log(err)
                    res.send(err)
                }
                else {
                    console.log("Blog updated successfully")
                    res.send(result)
                }
            });// end result
        }
    });
};

要编辑博客的信息，您正在从博客帖子服务中调用editBlog方法，并将其ID（blogId）和正文（blogData）传递给该方法。因此，在服务器端，您得到的是ID和主体（即更新数据）。您可以从请求中获取主体，所以req.body。您错过的实际上是更新找到的对象，这就是为什么我循环使用req.body中的新值来更新Blog对象的值，并且只有一次更新才保存它。显然，还有其他方法可以更新我们要修改的对象。