Javascript 为数组中的每个元素创建html元素（角度）

我有角分量

这是代码

    @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],
    });
  }
}

函数搜索与从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>

获取数组已经完成，下面是一个响应数组

{ 类别：空， 图标url:， id:cq6hLP0ETeW4VSrm7SYg5A， 网址：， 价值观：Chuck Norris认识WAZZZUP！ }

所以现在我需要从arrayit循环，它可以有多个元素，并为每个元素创建HTML标记

比如这个

<div>
<p>Number of array element</p>
<p>"value"</p>
</div>

我试着这样做

 data => [
  for (let i = 0; i < data.length; i++) {

  }
])

但这似乎不对

我怎样才能解决我的问题

---

Thank's

在组件源中公开您的数据：

  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;
    ])
  }

  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 *ngFor="let joke of jokes">
    <p>{{joke.category}}</p>
    <p>{{joke.value}}</p>
</div>

组件模板：

<div>
    <p>{{joke.category}}</p>
    <p>{{joke.value}}</p>
</div>

---

在组件源中公开数据：

  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;
    ])
  }

  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 *ngFor="let joke of jokes">
    <p>{{joke.category}}</p>
    <p>{{joke.value}}</p>
</div>

组件模板：

<div>
    <p>{{joke.category}}</p>
    <p>{{joke.value}}</p>
</div>

---

是这样的：data=>{console.logdata this.croples=data；}是的，但我得到的错误类型“Object”不能分配给类型“any[]”。“对象”类型可分配给很少的其他类型。您的意思是使用“any”类型吗？因此，可能是Object而不是any？看起来您的API返回的是单个JSON对象，而不是对象数组。数组将包含在[]中我将更改API代码以返回数组，而不是它当前返回的单个对象，因为您说过API将返回数组，这才有意义。如果您只有一个使用*ngFor的对象，则不适用。它是否类似于：data=>{console.logdata this.crooks=data；}是的，但我发现错误类型“object”不可分配给类型“any[]”。“对象”类型可分配给很少的其他类型。您的意思是使用“any”类型吗？因此，可能是Object而不是any？看起来您的API返回的是单个JSON对象，而不是对象数组。数组将包含在[]中我将更改API代码以返回数组，而不是它当前返回的单个对象，因为您说过API将返回数组，这才有意义。如果只有一个对象使用*ngFor，则不适用。