javascript - 为数组中的每个元素创建 html 元素(Angular)
问题描述
我有 Angular 组件
这是代码
@Component({
selector: 'app-testcomponent',
templateUrl: './testcomponent.component.html',
styleUrls: ['./testcomponent.component.scss']
})
export class TestcomponentComponent implements OnInit {
version: string = environment.version;
error: string;
searchForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
private http: HttpClient
) {
this.createForm();
}
ngOnInit() {}
search() {
this.http.get('https://api.chucknorris.io/jokes/search?query='+this.searchForm.value.jokevalue ).subscribe(
data => [
console.log(data)
])
}
private createForm() {
this.searchForm = this.formBuilder.group({
jokevalue: ['', Validators.required],
});
}
}
函数search()
与从 API 获取值以及在提交按钮上为数组中的每个元素制作 HTML 标记有关。这是模板HTML
<div class="container-fluid">
<form class="form-inline" (ngSubmit)="search()" [formGroup]="searchForm" novalidate>
<label for="text">Enter value:</label>
<input formControlName="jokevalue" style="margin-left:20px;" type="text" class="form-control" id="email">
<button style="margin-left:20px;" type="submit" class="btn btn-primary">Submit</button>
</form>
获取数组已完成,这是一个响应数组
{“类别”:空,“icon_url”:“ https://assets.chucknorris.host/img/avatar/chuck-norris.png ”,“id”:“cq6hLP0ETeW4VSrm7SYg5A”,“url”:“ https:// api.chucknorris.io/jokes/cq6hLP0ETeW4VSrm7SYg5A ", "value": "Chuck Norris 知道 WAZZZUP!" }
所以现在我需要从数组中循环(它可以有多个元素)并为每个元素创建 HTML 标记
例如这个
<div>
<p>Number of array element</p>
<p>"value"</p>
</div>
我试着这样做
data => [
for (let i = 0; i < data.length; i++) {
}
])
但是好像不对。
我怎样才能解决我的问题。
谢谢
解决方案
在组件源中公开您的数据:
public jokes: any[]; //or create an interface instead of using "any" for "strong" typing support
search() {
this.http.get('https://api.chucknorris.io/jokes/search?query='+this.searchForm.value.jokevalue ).subscribe(
data => [
console.log(data)
this.jokes = data;
])
}
<div *ngFor="let joke of jokes">
<p>{{joke.category}}</p>
<p>{{joke.value}}</p>
</div>
更新关于不使用数组的评论:
在组件源中公开您的数据:
public joke: any; //or create an interface instead of using "any" for "strong" typing support
search() {
this.http.get('https://api.chucknorris.io/jokes/search?query='+this.searchForm.value.jokevalue ).subscribe(
data => [
console.log(data)
this.joke = data;
])
}
组件模板:
<div>
<p>{{joke.category}}</p>
<p>{{joke.value}}</p>
</div>
推荐阅读
- python - 如何在 Python 3.X 上安装 scikits.odes
- c# - 找不到类型或命名空间名称“AdaptiveCards”
- r - R hclust:多棵树的公共顺序
- image - 在 Magento 自定义 PDF 中添加图像(扩展)
- ios - 在 iOS 中的异步 nsurlsession 中调用同步 nsurlsession
- python - Python中的升序
- .net - Glass.Mapper中GUID的大小写映射
- bots - 来自 Dialogflow 的聊天消息不会出现在 Slack 中
- excel - VBA - 用双引号包围数据
- peoplesoft - 在 WorkCenter 仪表板中配置 Pagelets/PivotGrids