Angular 2不打印JSON数据

时间:2018-04-11 17:50:57

标签: angular ionic-framework

我是Angular2的首发,我在尝试在屏幕上显示值时遇到问题。我想显示一个JSON值,但它只在控制台中显示。

我从另一个打字稿文件传递变量,它工作得很好,但我想显示值的属性,我不知道该怎么做。

export class NodeInformesPage {
  dataInformes: string;
  node: number;

   constructor(public navCtrl: NavController, public navParams: NavParams, public nav: NavController, public http: Http) {
    this.node = this.navParams.get('node');
    this.dataInformes = 'https://www.exampleurl.com' + this.node + '.json';
    if (this.dataInformes) {
       this.http.get(this.dataInformes)
          .map(res => res.json())
          .subscribe(node => this.dataShow(node));
         }
    }

    dataShow(node) {
       if (node) {
           for (let id of node) {
              let node = node;
              node = id;
              this.node.uid.push(node);
           }      
           console.log(node.uid);
        }
     }

}

我有空白屏幕,但控制台告诉我数据加载如下:

{vid: "8484", uid: "358", title: "Estados Contables por el ejercicio finalizado el 31/12/2015",…}
changed
:
"1522785856"
cid
:
"0"
comment
:
"1"
comment_count
:
"0"
created
:
"1522785856"
current_revision_id
:
"8484"
data
:
"a:8:{s:16:"ckeditor_default";s:1:"t";s:20:"ckeditor_show_toggle";s:1:"t";s:14:"ckeditor_width";s:4:"100%";s:13:"ckeditor_lang";s:2:"en";s:18:"ckeditor_auto_lang";s:1:"t";s:17:"mimemail_textonly";i:0;s:18:"htmlmail_plaintext";i:0;s:7:"overlay";i:1;}"
field_archivos_del_informes
:
{und: [,…]}
field_descripcion
:
[]
field_destacado
:
{und: [{value: "No"}]}
field_etiquetas
:
[]
field_fecha
:
{und: [{value: "2018-01-01 00:00:00", timezone: "America/Argentina/Buenos_Aires",…}]}
field_imagenes
:
{und: [{fid: "17436", uid: "358", filename: "030.jpg", uri: "public://informes/images/030.jpg",…}]}
field_n_de_informe
:
{und: [{value: "035", format: null, safe_value: "035"}]}
field_organismo_auditado_mobile
:
{und: [{value: "Casa de Moneda SE"}]}
field_sociedad_civil
:
[]
field_subtitulo
:
[]
field_tipo_de_informe
:
{und: [{value: "Estado Contable"}]}
is_current
:
true
is_pending
:
false
language
:
"es"
last_comment_name
:
null
last_comment_timestamp
:
"1522785856"
last_comment_uid
:
"358"
log
:
""
name
:
"Brian"
nid
:
"8761"
num_revisions
:
"1"
path
:
"https://www.exampleurl.com/estados-contables-por-el-ejercicio-finalizado-el-31122015-4"
picture
:
"0"
print_epub_display
:
0
print_epub_display_comment
:
0
print_epub_display_urllist
:
0
print_html_display
:
0
print_html_display_comment
:
0
print_html_display_urllist
:
0
print_pdf_display
:
0
print_pdf_display_comment
:
0
print_pdf_display_urllist
:
0
print_pdf_orientation
:
""
print_pdf_size
:
""
promote
:
"0"
revision_moderation
:
false
revision_timestamp
:
"1522785856"
revision_uid
:
"358"
status
:
"1"
sticky
:
"0"
title
:
"Estados Contables por el ejercicio finalizado el 31/12/2015"
tnid
:
"0"
translate
:
"0"
type
:
"informes"
uid
:
"358"
uuid
:
"d73e28cd-bc50-4218-a648-0f517d32d7a1"
vid
:
"8484"
vuuid
:
"8166cd62-2e32-47d1-979a-7f3aea18b832"

显然控制台打印字符串“358”。 我希望你能帮助我。提前谢谢。

更新:忘记我的HTML5视图。 很简单,{{node}}显示数据但{{node.uid}}没有。

 <ion-content>
 <ion-list>
       <span>{{node.uid}}</span>
 </ion-list>
</ion-content>

1 个答案:

答案 0 :(得分:2)

我同意Jedi Schmedi的观点。您使用名称&#39;节点&#39;适用于整个班级的不同类型。停下来!这是误导性的,不可读的,因为它容易出错,所以你会为自己的代码而烦恼。

唯一的节点&#39;你的HTML目前正在绑定

node: number;

没有别的。这就是

的原因
   <span>{{node}}</span>

显示值但

   <span>{{node.uid}}</span>

没有。

例如,通过这种方式对您的代码进行Rafactor:

node: any;

if (this.dataInformes) {
   this.http.get(this.dataInformes)
      .map(res => res.json())
      .subscribe(result => this.dataShow(result));
     }
}

dataShow(new_node_object) {
   if (new_node_object) {
       for (let id of new_node_object) {
          this.node.uid.push(id);
       }      
       console.log(this.node.uid);
    }
}


<ion-content>
   <ion-list>
     <span>{{node?.uid}}</span>
   </ion-list>
</ion-content>