title: Processing a two-dimensional array in Angular 7. ngFor
body: <p>How to handle a two-dimensional array using ngFor? 
  <a href="https://i.stack.imgur.com/33JQq.png" rel="nofollow noreferrer">I receive here such array</a></p>
  
  <p>As a result, I need to get the blocks in which the data from the array is displayed in order. That is, in the case of an array that is represented on the screen, there would be 10 blocks.
  <strong>Example:</strong> </p>
  
  <pre><code>&lt;div&gt;
    &lt;span&gt;Yandex&lt;/span&gt;
    &lt;span&gt;Yandex.N.V....&lt;/span&gt;
    &lt;span&gt;https://en.wikipedia.org/wiki/Yandex&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;span&gt;Yandex Browser&lt;/span&gt;
    &lt;span&gt;IPA:...&lt;/span&gt;
    &lt;span&gt;https://en.wikipedia.org/wiki/Yandex_Browser&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>etc.</p>
  
  <p>I do it that way. </p>
  
  <pre><code>&lt;h3&gt;Get Articles&lt;/h3&gt;
  &lt;div&gt;
    &lt;div *ngIf="articles"&gt;
      &lt;div *ngFor="let article of articles"&gt;
        &lt;span&gt;{{ article[1] }}&lt;/span&gt;
        &lt;span&gt;{{ article[2] }}&lt;/span&gt;
        &lt;span&gt;{{ article[3] }}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I understand that this is wrong, but I can not find my stupid mistake.
  The output is either an error or a <a href="https://i.stack.imgur.com/ti0us.png" rel="nofollow noreferrer">strange conclusion</a>.</p>
  
  <p><strong>search.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Article, ArticlesService } from '../../services/articles.service';
  
  @Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css'],
    providers: [ArticlesService]
  })
  export class SearchComponent implements OnInit {
  
    constructor(private articlesServices: ArticlesService) { }
  
    searchQuery: string;
    limit: number;
  
    error: any;
    articles: { };
  
    // noinspection JSMethodCanBeStatic
    getUrl(searchQuery: string) {
      return 'https://en.wikipedia.org/w/api.php?action=opensearch&amp;search='
        + searchQuery + '&amp;limit=10&amp;namespace=0&amp;format=json&amp;origin=*';
    }
  
    showArticles() {
      this.articlesServices.getArticles(this.getUrl(this.searchQuery))
        .subscribe(
          (data: Article) =&gt; this.articles = Object.values({
            title: data[0],
            collection: data[1],
            description: data[2],
            links: data[3]
          }),
          error =&gt; this.error = error
        );
      console.log(this.articles);
    }
  
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>article.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import {Article, ArticleInfo, ArticlesService} from '../../services/articles.service';
  
  @Component({
    selector: 'app-articles',
    templateUrl: './articles.component.html',
    styleUrls: ['./articles.component.css'],
  })
  export class ArticlesComponent implements OnInit {
  
    @Input() articles: Article;
    @Input() searchQuery: string;
  
    constructor(private articlesServices: ArticlesService) { }
  
    information: ArticleInfo;
  
    getUrl(searchQuery: string) {
      return 'https://ru.wikipedia.org/w/api.php?action=query&amp;list=search&amp;srsearch=' +
        searchQuery + '&amp;utf8=&amp;format=json&amp;origin=*';
    }
  
    showArticlesInformation() {
      this.articlesServices.getArticlesInfo(this.getUrl(this.searchQuery))
        .subscribe(
          (data: ArticleInfo) =&gt; this.information = {
            query: data.query.search
          }
        );
      console.log(this.information);
    }
  
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p><strong>article.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { throwError } from 'rxjs';
  import { retry, catchError } from 'rxjs/operators';
  
  export interface Article {
    title: string;
    collection: string[];
    description: string[];
    links: string[];
  }
  
  export interface ArticleInfo {
    query: {
      search
    };
  }
  
  @Injectable({
    providedIn: 'root'
  })
  export class ArticlesService {
  
    constructor(private http: HttpClient) { }
  
    getArticles(url) {
      return this.http.get(url)
        .pipe(
          retry(3),
          catchError(this.handleError)
        );
    }
  
    getArticlesInfo(url) {
      return this.http.get&lt;ArticleInfo&gt;(url);
    }
  
    // noinspection JSMethodCanBeStatic
    private handleError(error: HttpErrorResponse) {
      if (error.error instanceof ErrorEvent) {
        console.error('An error occurred:', error.error.message);
      } else {
        console.error(
          `Backend returned code ${error.status}, ` +
          `body was: ${error.error}`);
      }
      return throwError(
        'Something bad happened; please try again later.');
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MRc0P.png" rel="nofollow noreferrer">Come 2D array</a></p>
  
  <p><a href="https://i.stack.imgur.com/ZtR4R.png" rel="nofollow noreferrer">Then it should turn out like this</a></p>