Question

我想将HTML数据中的数据绑定到我的响应中。我在网络选项卡中得到响应，但HTML没有在HTML中绑定它。给我错误的说法无法读取属性＆＃39;长度＆＃39;未定义的

＆＃13;

import { Component, OnInit, Output } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

import { myService } from '../myService.service';
@Component({
  selector: 'app-data-display',
  templateUrl: './data-display.component.html',
  styleUrls: ['./data-display.component.css']
})
export class dataDisplayComponent implements OnInit {
	dataDisplayResults:any=[];
	Json:any = [];
	requestURL: string = "";
	queryString:any;
	responce:any;
  constructor(private myServiceVar:myService){ 
  	let re = /[?&]([^=#&]+)=([^&#]*)/g;
	let match;
	let isMatch = true;
	let matches = [];
	while (isMatch) {
	    match = re.exec(window.location.href);
	    if (match !== null) {
	        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
	        if (match.index === re.lastIndex) {
	            re.lastIndex++;
	        }
	    }
	    else {
	        isMatch = false;
	    }
	}
	this.queryString = matches;

	this.myServiceVar.getJsonConstants().subscribe(Jsons =>
  
		this.myServiceVar.getURLResponce(Jsons.domain+Jsons.Url +"?user="+this.queryString["user"]).subscribe(respData => 
			this.dataDisplayResults = respData			
		)
    
	)
  }

  ngOnInit(){ 
  	

  }

}

＆＃13;

<div *ngIf="dataDisplayResults.length">{{dataDisplayResults.date}}</div>

＆＃13;

Answer 1

使用?避免长度错误。如果dataDisplayResults未定义，则不访问length属性。

<div *ngIf="dataDisplayResults?.length > 0">{{dataDisplayResults.date}}</div>

Answer 2

惯例是在http方法中进行任何ngOnInit调用。通常不鼓励在组件构造器中进行繁重的计算工作。我建议您将http调用移动到组件的ngOnInit方法。

但是，您也可以检查存在和长度

<div *ngIf="dataDisplayResults && dataDisplayResults.length">{{dataDisplayResults.date}}</div>

另一件事是，你不应该嵌套rxjs Observable订阅调用。您可以使用mergeMap，switchMap等

this.myServiceVar.getJsonConstants()
       .mergeMap(Jsons => {
          return this.myServiceVar.getURLResponce(Jsons.domain+Jsons.Url +"?user="+this.queryString["user"]);
       })
       .subscribe(respData => {
             this.dataDisplayResults = respData         
       });

如何在角度4中绑定HTML中的数据，因为在几分钟后获得响应数据

2 个答案: