title: Angular 5 Material autocomplete has null initial value
body: <p>I have an autocomplete form field which works fine when it is a simple autocomplete.  However, when I try to add a custom filter, it fails.</p>
  
  <p>The data for the autocomplete is coming from a parent component. The parent component has:</p>
  
  <pre class="lang-js prettyprint-override"><code>alldwgrevdata: Observable&lt;DrawingRevisionIDsOnly[]&gt;;
  ...
  ngOnInit() {
      this.alldwgrevdata = this.drawingRevisionService.getAllDrawingRevisions();
  }
  </code></pre>
  
  <p>and passes the data to the child in the template by:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;child [alldwgrevdata]="alldwgrevdata | async"&gt;&lt;/child&gt;
  </code></pre>
  
  <p>The service returns <code>Observable&lt;DrawingRevisionIDsOnly[]&gt;</code>.</p>
  
  <p>The child is set up like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class DrawingSelectorComponent implements OnInit {
      @Input("drawingrevs")
      drawingrevs: DrawingRevision[] = [];
  
      @Input("alldwgrevdata")
      alldwgrevdata: DrawingRevisionIDsOnly[] = [];
  
      filteredrevdata: Observable&lt;DrawingRevisionIDsOnly[]&gt;;
  
      @Input()
      public parentForm: FormGroup;
  
      @Output()
      onDwgChange = new EventEmitter();
  
      constructor(private fb: FormBuilder, private drawingRevisionService: DrawingRevisionService, private messagesService: MessagesService) { }
  
      ngOnInit() {
          console.log(this.alldwgrevdata);
          let dwgSelectControl = new FormControl(this.drawingrevs);
          this.parentForm.addControl('attachedDwgsControl', dwgSelectControl);
  
          this.filteredrevdata = dwgSelectControl.valueChanges
              .startWith([])
              .map(dwgrev =&gt; dwgrev &amp;&amp; typeof dwgrev === 'object' ? (dwgrev.drawingID+" "+dwgrev.revisionid) : dwgrev)
              .map(dwgIDrevID =&gt; dwgIDrevID ? this.filter(dwgIDrevID) : this.alldwgrevdata.slice());
      }
  
      filter(dwgIDrevID: string): DrawingRevisionIDsOnly[] {
          return this.alldwgrevdata.filter(option =&gt; (option.drawingID+" "+option.revisionid).toLowerCase().indexOf(dwgIDrevID.toLowerCase()) === 0);
      }
  
      displayFn(dwgRev: DrawingRevisionIDsOnly): string {
          return dwgRev ? (dwgRev.drawingID+" "+dwgRev.revisionid) : "";
      }
  }
  </code></pre>
  
  <p>The error is <code>this.alldwgrevdata is null</code>.  In the ngOnInit() method, the console.log does indeed output <code>null</code>, so the error makes sense to some degree.  The problem comes when setting the <code>valueChanges</code> part of the form control.</p>
  
  <p>I tried to change</p>
  
  <pre class="lang-js prettyprint-override"><code>this.alldwgrevdata.slice()
  </code></pre>
  
  <p>to</p>
  
  <pre class="lang-js prettyprint-override"><code>(this.alldwgrevdata==null ? [] : this.alldwgrevdata.slice())
  </code></pre>
  
  <p>but that had no effect.</p>
  
  <p>How can I either set an initial value for the Observable to an empty array, or force the valueChanges to wait until the data service is complete before being evaluated?  Or is there a completely different way to go about this which I am missing?  Thanks!</p>