Get data from API (Angular)

I need to get data from API by submit button

Here is url - https://api.chucknorris.io/jokes/search?query=******

***** is the value from the input

This is the response from API

{
"total": 1,
"result": [
    {
        "category": null,
        "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
        "id": "cq6hLP0ETeW4VSrm7SYg5A",
        "url": "https://api.chucknorris.io/jokes/cq6hLP0ETeW4VSrm7SYg5A",
        "value": "Chuck Norris knows WAZZZUP!"
    }
]

}

I need to get value from the result and show it in View

As you can see it's an object, not array.

I tried to it like this

Template code

<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>
  <div style="background: black; height: 60px;" *ngFor="let joke of jokes;index as i">
      <p style="color: white">{{i}}</p>
      <p style="color: white">{{joke.result[i].value}}</p>
  </div>

Component code

   import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { finalize } from 'rxjs/operators';
import { Http, Headers, Response, URLSearchParams } from '@angular/http';
import { HttpClient } from '@angular/common/http';

import { environment } from '@env/environment';
import { Logger, I18nService, AuthenticationService } from '@app/core';

@Component({
  selector: 'app-testcomponent',
  templateUrl: './testcomponent.component.html',
  styleUrls: ['./testcomponent.component.scss']
})
export class TestcomponentComponent implements OnInit {
  public jokes: any;
  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),
      this.jokes = data

    ])
  }

  private createForm() {
    this.searchForm = this.formBuilder.group({
      jokevalue: ['', Validators.required],
    });
  }
}

But it says

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

How I can. fix this?

Thank's for help.