角度为4的可观察异步管道

Question

我对angular是个新手，开始学习angular 4。数据未与使用异步管道的组件上的ngfor指令绑定。请帮忙

用户服务使用HTTP请求从API获取数据：

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');
    }
}

在这里，我使用用户列表的可观察用户[]界面：

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;
    }   
}

订阅可观察用户变量的异步管道模板：

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

您的*ngif正在制造问题，如果没有异步管道，您无法直接检查您的可观察长度。试试这个，

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

Answer 2

因为您使用的是异步。尝试删除susbcribe。在您的原始代码上。这里有一个类似的视频。将$用于可观察属性真的很有帮助。。。