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>

取得陣列已完成，這裡是一個回應陣列

{ "category": null, "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png", "id": "cq6hLP0ETeW4VSrm7SYg5A", "url": "https://api.chucknorris.io/jokes/cq6hLP0ETeW4VSrm7SYg5A", "value": "查克·諾里斯知道 WAZZZUP!" }

所以現在我需要從陣列（它可以有多個元素）中循環，並為每個元素創建 HTML 標記

例如這個

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

我試著這樣做

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

  }
])

但似乎不對。

我如何解決我的問題。

謝謝

答案＃1

在你的組件源碼中暴露你的資料：

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

在你的元件模板中使用 *ngFor 來綁定你的資料：

<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>