Async Rohr mit beobachtbar in Angluar 4

Question

Ich bin neu zu eckigen und begann lehnen eckigen 4. Daten nicht verbindlich mit ngfor Direktive auf Komponente mit asynchronen Rohr. Bitte helfen

Benutzerdienst Verwendung HTTP-Anforderung, um Daten von api zu erhalten:

user.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import { User } from "../Models/user"; 

@Injectable() 
export class UserService { 
constructor(private http: Http) { } 

get(url: string): Observable<User[]> { 
    return this.http.get(url) 
     .map(response => response.json() as User[]) 
     // .do(data => console.log("All: " + JSON.stringify(data))) 
     .catch(this.handleError); 
} 
private handleError(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error'); 
} 
} 

Hier i beobachtbaren Benutzern sind mit [] Schnittstelle für die Benutzerliste:

user.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { UserService } from '../Services/user.service'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; 
import { User } from '../Models/user'; 
import { DBOperation } from '../Shared/enum'; 
import { Observable } from 'rxjs/Observable'; 
import { Global } from '../Shared/global'; 

@Component({ 
    templateUrl: 'app/Components/user.component.html' 
}) 

export class UserComponent implements OnInit { 
    @ViewChild('modal') modal: ModalComponent; 
    users$: Observable<User[]>; 
    user: User; 
    msg: string; 
    indLoading: boolean = false; 
    userForm: FormGroup; 
    dbops: DBOperation; 
    modalTitle: string; 
    modalBtnTitle: string 

    constructor(private fb: FormBuilder, private userService: UserService) 
    { } 

    ngOnInit(): void { 
    this.userForm = this.fb.group({ 
     Id: [''], 
     UserName: ['', Validators.required], 
     Password: ['', Validators.required], 
     FirstName: ['', Validators.required], 
     LastName: ['', Validators.required], 
     Gender: ['', Validators.required] 
    }); 
    this.LoadUsers(); 
    } 
    LoadUsers(): void { 
     this.indLoading = true; 
     this.users$ = this.userService.get('http://localhost:29712/api/userapi/'); 
     this.indLoading = false; 
    } 
} 

Vorlage für Async-Rohr zu abonnieren obs ervable Benutzer variabel:

user.component.html

<div class='panel panel-primary'> 
    <div class='panel-heading'> 
     User Management 
    </div> 
    <div class='panel-body'> 
     <div class='table-responsive'> 
     <div class="alert alert-info" role="alert" *ngIf="indLoading"><img src="../../images/loading.gif" width="32" height="32" /> Loading...</div> 
     <div *ngIf='users && users.length==0' class="alert alert-info" role="alert">No record found!</div> 
     <table class='table table-striped' *ngIf='users && users.length'> 
      <thead> 
       <tr> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Gender</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="let user of users$ | async"> 
        <td>{{user.FirstName}}</td> 
        <td>{{user.LastName}}</td> 
        <td>{{user.Gender}}</td> 
       </tr> 
      </tbody> 
     </table> 
     <div> 
     </div> 
    </div> 
    <div *ngIf="msg" role="alert" class="alert alert-info alert-dismissible"> 
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
     <span class="sr-only">Error:</span> 
     {{msg}} 
    </div> 
</div> 

Answer 1

Da Sie async verwenden. Versuchen Sie, Abonnenten zu entfernen. auf Ihrem ursprünglichen Code. Hier ist eine video von etwas ähnlichem. Es ist wirklich hilfreich $ für Observable Eigenschaften zu verwenden ...

Answer 2

Ihr * ngIf macht das Problem Sie können nicht direkt Ihre beobachtbare Länge ohne asynchrone Pipe überprüfen. Versuchen Sie dies,

*ngIf="(users$ | async)?.length==0"