Async pipe does not fill object data into template

Question

Can anyone help me see if there is a syntax error here in my template? It does not give error, but does not fill in data into the template either:

Answer 1

The best way to handle a Single Observable Object inside an Angular 2.3.x, or Angular 4.x template is to use an async pipe with a template variable.

Here's a common goal for angular developers. Take an array of elements from redux, and pluck a single matching element from the collection. Then render that singular object in a template.

COMPONENT

@Component({
  selector: 'app-document-view',
  templateUrl: './document-view.component.html',
  styleUrls: ['./document-view.component.scss']
})
export class DocumentViewComponent implements OnInit {

  @select(['documents', 'items']) readonly documenList$: Observable;
  public documentVO$: Observable;

  constructor(private _state: NgRedux,
              private _route: ActivatedRoute,
              private _documentActions: DocumentActions) {

    _route.params.subscribe(params => {
      let modelId: number = parseInt(params['modelId']); //1          
      let documentId: number = parseInt(params['documentId']); //50
      this._documentActions.getDocument(modelId, documentId);
    });
  }

  ngOnInit() {

    //documenList holds all of the documents in our application state
    //but this view only wants a single element

    this.documentVO$ = this.documenList$.map(documents => documents.find(doc => doc.documentId === 50));
  }
}

VIEW

    

        

            
{{ dto.title }}