title: Angular/TypeScript: how to initialize Observable matrix
body: <p>On Angular I write in the html template this code:</p>
  
  <pre><code>&lt;div *ngFor='let itemArray of myObservableArray'&gt;
    &lt;div *ngFor='let item of itemArray | async'&gt;
      {{item.value}}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { MyService, MyDataType } from './app.service';
  import { Observable } from 'rxjs/Observable';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    name = 'Angular 5';
    myObservableArray: Observable&lt;MyDataType[][]&gt;;
  
    constructor(private myService: MyService) {
      this.getData(2);
    }
  
    getData(id: number) {
      if (!this.myObservableArray) {
        this.myObservableArray = new Array&lt;MyDataType[]&gt;();
        this.myObservableArray[id] = this.myService.getData(id);
      }
    }
  }
  </code></pre>
  
  <p>And this is the code of the app.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  
  @Injectable()
  export class MyService {
  
    mydata: MyDataType[] = [
      {"id":1, "value":"value_1_1"},
      {"id":1, "value":"value_1_2"},
      {"id":2, "value":"value_2_1"},
      {"id":2, "value":"value_2_2"},
      {"id":3, "value":"value_3_1"},
      {"id":3, "value":"value_3_2"}
    ];
  
    constructor() { }
  
    getData(id: number):Observable&lt;MyDataType[]&gt;
    {
      let data = new Observable&lt;MyDataType[]&gt;(observer =&gt; {
  
            setTimeout(() =&gt; {
                observer.next(this.mydata.filter(i =&gt; i.id == id));
            }, 4000);
      });
      return data;
    }
  }
  
  export class MyDataType
  {
    public id: number;
    public value: string;
  }
  </code></pre>
  
  <p>The html template works correctly but I don't understand why the compiler give me this error:</p>
  
  <pre><code>Type 'MyDataType[][]' is not assignable to type 'Observable&lt;MyDataType[][]&gt;'.
        Property '_isScalar' is missing in type 'MyDataType[][]'.
      (property) AppComponent.myObservableArray: Observable&lt;MyDataType[][]&gt;
  </code></pre>
  
  <p>I think my initialization of the matrix is wrong but being quite new on Angular and TypeScript/JavaScript I would like help on how I can do it.
  On stackbliz I put the complete <a href="https://stackblitz.com/edit/angular-ngfor-with-observable-matrix" rel="nofollow noreferrer">DEMO</a>. Thanks.</p>