0

我已经建立了用户列表，并用来自这个来源（ https://jsonplaceholder.typicode.com/posts）的相关数据填充了它。我显示了“标题”和“正文”。然后我在每个用户的标题旁边制作了“编辑”按钮，所以无论何时单击它，都会打开两个输入字段（“标题”和“正文”）。现在我想用我上面提到的源的默认数据填充这两个输入字段。另外，如果有人使用输入更改文本，则应更改数据。我试图这样做，但它不起作用。

这是HTML文件：

<div class="forms container">
  <form #postForm="ngForm">
      <div class="form-group">
          <label for="title">Title</label>
          <input [(ngModel)]="title" 
          name="title"  
          id="title" 
          type="text" 
          class="form-control"
          >
      </div>
      <div class="form-group">
        <label for="body">Body</label>
        <textarea [(ngModel)]="body" id="body" cols="30" rows="10" 
        class="form-control"
        ></textarea>
      </div>
      <button class="btn btn-success">Submit</button>
  </form>
</div>

这是我的 component.ts 文件：

import { Component, OnInit } from '@angular/core';
import { PostService } from 'src/app/shared/posts.service';
import { ActivatedRoute } from '@angular/router';

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


  posts: any;

  constructor(private postService: PostService ,private route: ActivatedRoute) { }

  ngOnInit() {
    this.postService.getPosts().subscribe(
      (posts: any) => this.posts = posts
    );
  }

}

这是我的 PostService：

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

@Injectable({
    providedIn: 'root'
}) 

export class PostService {

    constructor(private http: HttpClient) { }

    getPosts() {
        return this.http.get('https://jsonplaceholder.typicode.com/posts')
      }
}
4

2 回答 2

0

您似乎没有编写任何代码来处理表单？

这段代码：

    export class FormsComponent implements OnInit {


      posts: any;

      constructor(private postService: PostService ,private route: ActivatedRoute) { }

      ngOnInit() {
        this.postService.getPosts().subscribe(
          (posts: any) => this.posts = posts
        );
      }
   }

似乎只是列表组件中代码的副本。

如果您希望您的表单组件仅适用于一篇文章，那么代码只需要检索一篇文章（不是全部）。

如果您的表单绑定到：

[(ngModel)]="title"

和

[(ngModel)]="body"

您的组件需要公开这些属性。

下面是一些显示详细信息页面的代码示例。对于您的编辑表单，代码将类似：

https://github.com/DeborahK/Angular-GettingStarted/tree/master/APM-Final

或者

https://stackblitz.com/edit/github-gettingstarted-deborahk

于 2019-02-18T17:56:49.797 回答
0

您需要在组件中命名title和命名属性并body为它们分配值。这是关于 stackblitz 的示例： https ://stackblitz.com/edit/angular-we5mfr

于 2019-02-18T18:03:37.547 回答