更新时如何使用api更新角度反应形式，给出空值

Question

如何更新角度反应形式，我的代码在更新表单时不起作用，它只返回旧值请帮助我如何更新角度反应形式。

edit-blog.component.ts

import { Component, OnInit } from '@angular/core';
import { Blog } from '../_models/blog';
import { UserService } from '../_services';
import { User } from '../_models'
import { Router } from '@angular/router';
import { FormControl } from '@angular/forms';
import { AuthenticationServiceService } from '../_services';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Title } from '@angular/platform-browser';
@Component({
  selector: 'app-edit-blog',
  templateUrl: './edit-blog.component.html',
  styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {
  editBlogForm = new FormGroup({
    title: new FormControl(''),
    blog: new FormControl(''),
  });
  user: User[];
  //data:any;
  submitted = false;
  id: number;
  constructor(private router: Router,
    private formBuilder: FormBuilder,
    public flashMessageService: FlashMessagesService,
    private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }
  get f() { return this.editBlogForm.controls; }

  ngOnInit() {
    this.editBlogForm = this.formBuilder.group({
      title: ['', Validators.required],
      blog: ['', Validators.required],

    });
    //console.log('hjkhjk',this.users);
    //console.log('my form: ', this.editBlogForm)
    // this.editUserBlog()
    const id = this.userService.getCurrentId();
    this.userService.editUserBlog(id).pipe(first()).subscribe(user => {
      user = user;
      this.editBlogForm.setValue({
        title: user["0"].title,
        blog: user["0"].blog,
      });
    });

  }


  onSubmit(user: User) {
    this.editBlogForm.patchValue({
      title: user.title,
      blog: user.blog,

    });
    //console.warn(this.editBlogForm.value);
    this.userService.update(user).subscribe(user => {
      user = user;
      this.flashMessageService.show('Blog Updated successfully.',
        { cssClass: 'alert alert-danger alert-dismissible fade in', timeout: 3000 });
      console.log(user);
    });


  }


}

以下是我的服务，其中更新功能和此功能调用 onSubmit 。在edit-blog.component.ts中制作的onSubmit函数请帮助我如何在我使用laravel api的数据库中更新它

user.servece.ts

 update(user: User) {

    return this.http.put(`http://localhost:8000/api/blog-update/${this.id}`, user);

  }

编辑-mlog.component.html

<div>
    <div class="container">
        <div class="row">

            <div class="col-sm-3">
            </div>
            <div class="col-sm-6" style="margin-top: 60px">
                <h2>Update your blog here..</h2>
                <form [formGroup]="editBlogForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <input type="text" formControlName="title" class="input" [ngClass]="{ 'is-invalid': submitted && f.title.errors }"
                            placeholder="Title" />
                        <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
                            <div *ngIf="f.title.errors.required">Title is required</div>
                        </div>
                    </div>
                    <div class="form-group">

                        <app-ngx-editor type="text" formControlName="blog" height="250px" minHeight="50px" class=""
                            [placeholder]="'Enter text here...'" [spellcheck]="true" [ngClass]="htmlContent"></app-ngx-editor>
                        <div *ngIf="submitted && f.blog.errors" class="invalid-feedback">
                            <div *ngIf="f.blog.errors.required">Blog is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" [disabled]="!editBlogForm.valid" class="btn btn-primary">Update</button>
                    </div>
                </form>

            </div>

            <div class="col-sm-3">

            </div>

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

Answer 1

edit-blog.component.ts

import { Component, OnInit } from '@angular/core';
import { Blog } from '../_models/blog';
import { UserService } from '../_services';
import { User } from '../_models'
import { Router } from '@angular/router';
import { FormControl } from '@angular/forms';
import { AuthenticationServiceService } from '../_services';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
  selector: 'app-edit-blog',
  templateUrl: './edit-blog.component.html',
  styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {
  resizer: string;
  editBlogForm = new FormGroup({
    title: new FormControl(''),
    blog: new FormControl(''),
  });
  user: User[];
  //data:any;
  submitted = false;
  id: number;
  constructor(private router: Router,
    private formBuilder: FormBuilder,
    public flashMessageService: FlashMessagesService,
    private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }
  get f() { return this.editBlogForm.controls; }

  ngOnInit() {
    this.editBlogForm = this.formBuilder.group({
      title: ['', Validators.required],
      blog: ['', Validators.required],

    });
    //console.log('hjkhjk',this.users);
    //console.log('my form: ', this.editBlogForm)
    // this.editUserBlog()
    const id = this.userService.getCurrentId();
    this.userService.editUserBlog(id).pipe(first()).subscribe(user => {
      user = user;
      this.editBlogForm.setValue({
        title: user["0"].title,
        blog: user["0"].blog,
      });
    });

  }


  onSubmit(user) { 

   user={}
    user['title']= this.editBlogForm.get('title').value; 
    user['blog']= this.editBlogForm.get('blog').value; 
    //console.warn(this.editBlogForm.value); 
    this.userService.update(user).subscribe(user => { 
    user = user; 
    this.router.navigate(['blog-list']);
    this.flashMessageService.show('Blog Updated successfully.', 
    { cssClass: 'alert alert-success', timeout: 3000 }); 

    }); 

  }


}