Question

我有一个调用服务并返回数据的组件，如图所示。数据未显示在HTML页面上。我错过了什么？ roots数组作为数组的数组返回，但数据是正确的，我相信HTML也是正确的

Angular 2新手，所以我们将非常感谢任何帮助

根组件。

export class RootsComponent implements OnInit {
    private baseRootEndpoint: string = 'http://localhost:59534/api/admin';

    private isUploadBtn: boolean = true; 
    private dbops: number = 0;
    private msg: string = '';
    private dataForm: FormGroup;
    private imageData;
    private contentType;
    private fileLength;
    public roots: Root[];
    private isLoading = true;
    @Input() root: Root;

    constructor(private http: Http, private _rootService : RootService,  fb:FormBuilder) {
    }

    ngOnInit() {
       this.roots = [];
       this.getRoots();
    }

    //call the service and bring back a list of roots

    getRoots() {
        debugger;
        var me = this;
        this._rootService.get(this.baseRootEndpoint).subscribe(
            data => me.roots.push(JSON.parse(data._body)),
            error => me.msg = error
        );
        this.isLoading = false;
    }
}

//simple service
@Injectable()
export class RootService {
    constructor(private _http: Http) { }



    get(url: string): Observable<any> {
       debugger;
       return this._http.get(url);

    }
}

<div class="container-fluid">
    <div class="row">
        <div class="header">
            <h4 class="title">&nbsp;&nbsp; Roots</h4>
        </div>

        <div class="col-lg-10 col-lg-offset-1" *ngIf="!isLoading">
            <table>
                <thead>
                    <tr>
                        <th>Root Name</th>
                        <th>Root</th>
                        <th>Definition</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr  *ngFor="let root of roots[0]" let id="index">
                        <td>{{root.DescriptiveName}}</td>
                        <td><img src="{{root.Root}}" name="rootImage" /></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

因此，在角度2/4中，我们必须使用observable来让组件知道它将在服务中被更改：

roots: Observable<Array<Root>>;
getRoots() {
    debugger;
    var me = this;
    this._rootService.get(this.baseRootEndpoint).subscribe(
        data => me.roots = (JSON.parse(data._body)),
        error => me.msg = error
    );
    this.isLoading = false;
}

然后在你的HTML中：

*ngFor="let root of roots | async"

这个异步标志意味着我们正在解析我们在observable中的observable，如果你想避免使用异步管道，你可以订阅你的ngOnInit中的变量并让它打印到一个单独的数组

如果有任何问题请随时与我联系:)祝你好运！

PS：如果您向我们展示您的JSON输出并告诉我们是否调用错误，它会有很多帮助。

从服务返回的数据不以角度2显示在组件中

1 个答案: