当前位置: 首页 > 知识库问答 >
问题:

从Service获取数据到模板

都超英
2023-03-14

我需要从服务绑定模板数据变量。服务使用HTTP检索JSON格式的数据。我得到了正确的数据,但是因为请求是如此的异步返回服务总是未定义的。

如何将异步数据销售到模板中?不使用回调?

AppComponent:

    import {Component} from 'angular2/core';
    import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';
    import {SystemComponent} from "./system.component";
    import {MenuProvider} from "./providers/menuprovider";
    import {Menu} from "./entity/menu";
    import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';

    @Component({
        selector: 'app',
        templateUrl: '/templates/layout',
        directives: [ROUTER_DIRECTIVES]
    })

    @RouteConfig([
        {
            path: '/',
            redirectTo: ['/System'],
            useAsDefault: true
        },
        {
            path: '/-1/...',
            name: 'System',
            component: SystemComponent
        }
    ])



    export class AppComponent {

        menusItems:Array<Menu>;

        constructor(router: Router, menuProvider:MenuProvider){
            this.menusItems = menuProvider.getMenuItems(1);
            router.navigate(['/System']);
        }
    }

菜单提供者:

    import {Menu} from "../entity/menu";
    import {IndexedCollection} from "../collections/IndexedCollection";
    import {Injectable}    from 'angular2/core'
    import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';

    @Injectable()
    export class MenuProvider{

        _menuItems:Array<Menu>;

        private _http:Http;

        constructor(http:Http){
            this._http = http;
        }

        getMenuItems(shopId:number){
            this.loadMenuForShopId(shopId);
            return this._menuItems;
        }

        private loadMenuForShopId(shopId:number){
            var base = this;
            this._http.get('/services/menu/list/' + shopId)
                .subscribe(
                  function(res){
                      res = res.json();
                      for(index in res['menuItems']){
                          var menu = res['menuItems'][index];
                          base._menuItems.push(new Menu(menu['url'], menu['name']));
                      }
                  }
                );
        }
    }

月经量:

     export class Menu{

        private _url;

        private _name;

        constructor(url:string,name:string){
            this._url = url;
            this._name = name;
        }

        get url() {
            return this._url;
        }

        get name() {
            return this._name;
        }
    }

模板:

        <ul>
            <li  *ngFor="#menu of menusItems">
                <a>{{menu.getName()}}</a>
            </li>
        </ul>

共有2个答案

殷宇
2023-03-14

请不要使用同步HTTP请求。这可能会阻止浏览器在请求完成之前运行任何代码。

在我看来,最好的解决方案是保持请求异步,但在检索数据时向用户显示一条消息,如“加载”。

您可以使用ngIf指令以及在请求完成后变为true的变量。

田俊爽
2023-03-14

看看可观察的;这是你最好的新朋友;

您可以让“冷”成为可观察的(只需描述它应该做什么):

getMenuItems(shopId:number){
  return this._http
    .get('/services/menu/list/' + shopId)
    .map(res => res.json())
    .map(res => {
      let menu = res.menuItems;
      return new Menu(menu.url, menu.name)
    })
}

... 让angular使用AsyncPipe订阅:

<ul>
  <li  *ngFor="#menu of menusItems |async">
    <a>{{menu.getName()}}</a>
  </li>
</ul>

AsyncPipe处理可观察到的、promise和事件。。。

transform(obj: Observable<any>| Promise<any>| EventEmitter<any>, args?: any[]) : any
 类似资料:
  • 问题内容: 我已经在数据库中编写了一个简单的函数。从我的源代码中,我像这样调用此函数 我的数据正确无误,但数据集的表头显示的是我的函数名(),而不是和。在这种情况下如何获取数据? 目前的输出是 但是我想输出如下: 我正在努力实现以下目标: 以下查询工作正常: 问题答案: 当函数返回结果集时,您应该使用。 不要将用于设置返回函数的调用放入选择列表。

  • 问题内容: 我正在使用Python(通过)包装的C库来运行一系列计算。在运行的不同阶段,我想将数据放入Python,尤其是数组。 我正在使用的包装对数组数据进行两种不同类型的返回(这对我特别有意义): Array:当我这样做时(其中x是数组,我得到一个回报。我知道该数据是文档中内部数据的副本,我能够轻松地将其放入数组中: 这将返回数据的一维数组。 指向数据的指针:在这种情况下,从库的文档中可以了解

  • 问题内容: 我的代码有问题。 像这样的情况: 我有一个下拉列表,如果选择“个人”,则会出现新的下拉列表,其中包含从数据库查询中检索到的数据;如果选择“公开”,则该下拉列表将消失。 这样的HTML代码: 查询如下: 像这样的JavaScript代码: 我不知道如何将值/结果发送到javascript代码(选择选项中的值和名称)。 问题答案: 在javascript中,您必须对您的php文件进行操作:

  • 问题内容: 日志,为什么? 问题答案: 为了详细说明@Raynos所说的内容,您定义的函数是一个异步回调。它不会立即执行,而是在文件加载完成后执行。当您调用readFile时,将立即返回控件并执行下一行代码。因此,当您调用console.log时,尚未调用您的回调,并且尚未设置此内容。欢迎使用异步编程。 示例方法 或者更好的是,如Raynos的示例所示,将您的调用包装在一个函数中并传递您自己的回调

  • 本文向大家介绍node.js从数据库获取数据,包括了node.js从数据库获取数据的使用技巧和注意事项,需要的朋友参考一下 本文需要用node.js做一个从Sqlserver获取数据并显示到页面上的小功能,下面就为大家分享: app.js: 接下来就直接在页面中使用get方式请求即可,当然post方式也是类似原理。 还有我发现textarea控件在改变其text和html属性的时候,value还保