angular - 如何使用来自 http 的数据填充输入字段
问题描述
我已经建立了用户列表,并用来自这个来源( 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')
}
}
解决方案
您似乎没有编写任何代码来处理表单?
这段代码:
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
或者
推荐阅读
- javascript - 将 html 输入日期转换为可用于 javascript 日期对象
- sql - SQL Server : 协助 INSERT INTO
- javascript - 标签不会在点击时切换
- java - 在jsp中更新记录时设置值= 0
- python - 如何使用 python 代码最小化所有非活动窗口?
- r - 函数成模拟?
- java - JavaFX PrinterJob 在打印时添加边距,将其推离页面
- sql-server - 连接是否比直接在表中存储简单值更快?
- php - 如何使用占位符在 WooCommerce 电子邮件中包含自定义字段
- javascript - 将 SQL 查询传递到 Inquirer Prompt