Javascript Express Subscribe调用中JSON数组的角度HTML绑定错误

我当前的设置是这样的

my

dashboard.component.ts的
ngOnInIt
运行
databaseService
调用以订阅结果

database.service.ts

运行

httppost

以获取数据并填充值

issuegroup

我想用HTML显示数据库给我的

JSON

结果

代码如下：

仪表板.component.ts

从'/../database.service'导入{IssuerGroup}；
从“@angular/core”导入{Component，OnInit}；
从'@angular/router'导入{RouterLink}；
从“@angular/forms”导入{FormArray、FormControl、FormGroup、Validators}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
从“量角器”导入{element}；
从'@angular/router'导入{ActivatedRoute}；
从“../database.service”导入{DatabaseService}；
@组成部分({
选择器：“应用程序仪表板”，
templateUrl:“./dashboard.component.html”，
样式URL:['./dashboard.component.css']
})
导出类DashboardComponent实现OnInit{
issuerGroups:IssuerGroup[]；
建造师(
专用数据库服务：数据库服务，
专用路由：ActivatedRoute
) {}
恩戈尼尼特（）{
const id=this.route.snapshot.paramMap.get（'id'）；
this.databaseService.getGroup（id）
.subscribe（issuerGroups=>this.issuerGroups=issuerGroups）；
}
}

数据库.service.ts

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
从“rxjs/operators”导入{map}；
导入“rxjs/add/operator/catch”；
导入“rxjs/add/observable/throw”；
导入'rxjs/add/operator/do'；
导入“rxjs/add/operator/toPromise”；
导出类发布组{
发卡机构Id：编号；
发卡机构名称：字符串；
发卡机构\集团\名称：字符串；
}
@可注射（）
导出类Teradasservice{
构造函数（私有的_http:HttpClient）{}
getGroup（id）：可观察{
常量url=http://localhost:3000/ig';
常数数据=({
issuerid:id
});
返回此。\u http.post（url、数据）
.烟斗(
地图（（分辨率）=>{
控制台日志（res）；
返回res；
})
);
}
}

dashboard.component.html

在此处显示发卡机构名称：{{issuerGroups.Issuer\u Name}

在此处显示颁发者名称：{{issuerGroup.Issuer\u Name}

在此处显示颁发者名称：{{issuerGroups[0]。颁发者名称}

在HTML页面的最后一个示例中，数据显示了，但仍然收到错误。

目标：在我的HTML页面中显示从数据库返回的JSON结果，无错误。非常感谢您的帮助。

您可以在将变量绑定到HTML模板时使用（使用

？

before属性），如：

{{ issuerGroups?.Issuer_Name }}

它全局地向您的视图显示

发卡机构名称

，仅当

发卡机构组

存在时（不是

空的

或

未定义的

）。这样做的好处是，您不必使用

*ngIf

（某些情况除外），也不必进一步检查属性是否存在以将其显示到视图中

因此，在您的示例中，它将如下所示：

<p> Display the Issuer Name here: {{ issuerGroup?.Issuer_Name }} </p>

在此处显示发卡机构名称：{{issuerGroup？.Issuer\u Name}

但是，在上一次绑定中，由于您正在调用索引，我建议您这样做：

<p *ngIf="issuerGroups?.length"> Display the Issuer Name here: {{ issuerGroups[0]?.Issuer_Name }} </p>

<p> Display the Issuer Name here: {{ issuerGroups?.length ? issuerGroups[0]?.Issuer_Name : '' }} </p>

在此处显示发卡机构名称：{{{issuerGroups[0]？.Issuer_Name}

或者像这样：

<p *ngIf="issuerGroups?.length"> Display the Issuer Name here: {{ issuerGroups[0]?.Issuer_Name }} </p>

<p> Display the Issuer Name here: {{ issuerGroups?.length ? issuerGroups[0]?.Issuer_Name : '' }} </p>

在此处显示发卡机构名称：{{issuerGroups？.length？issuerGroups[0]？.Issuer_名称：“”}

但是有很多方法可以做到这一点。

您可以在将变量绑定到HTML模板时使用（使用

？

before属性），如：

{{ issuerGroups?.Issuer_Name }}

它全局地向您的视图显示

发卡机构名称

，仅当

发卡机构组

存在时（不是

空的

或

未定义的

）。这样做的好处是，您不必使用

*ngIf

（某些情况除外），也不必进一步检查属性是否存在以将其显示到视图中

因此，在您的示例中，它将如下所示：

<p> Display the Issuer Name here: {{ issuerGroup?.Issuer_Name }} </p>

在此处显示发卡机构名称：{{issuerGroup？.Issuer\u Name}

但是，在上一次绑定中，由于您正在调用索引，我建议您这样做：

<p *ngIf="issuerGroups?.length"> Display the Issuer Name here: {{ issuerGroups[0]?.Issuer_Name }} </p>

<p> Display the Issuer Name here: {{ issuerGroups?.length ? issuerGroups[0]?.Issuer_Name : '' }} </p>

在此处显示发卡机构名称：{{{issuerGroups[0]？.Issuer_Name}

或者像这样：

<p *ngIf="issuerGroups?.length"> Display the Issuer Name here: {{ issuerGroups[0]?.Issuer_Name }} </p>

<p> Display the Issuer Name here: {{ issuerGroups?.length ? issuerGroups[0]?.Issuer_Name : '' }} </p>

在此处显示发卡机构名称：{{issuerGroups？.length？issuerGroups[0]？.Issuer_名称：“”}

---

但是有很多方法可以做到这一点。

问题在于，您在模板属性中使用的内容可能还不存在。解释你的错误：

<p> Display the Issuer Name here: {{ issuerGroups.Issuer_Name }} </p>

这将始终失败，因为您的组件中根本没有定义

issuerGroup

字段

<p> Display the Issuer Name here: {{ issuerGroups[0].Issuer_Name }} </p>

以及在控制器中添加方法：

getIssuerName() {
    if (this.issuerGroups && this.issuerGroups.length > 0) {
        return this.issuerGroups.Issuer_Name[0];
    } else {
        return "";
    }
}

（当然，您可以在HTML文件中进行内联检查，就像其他人建议的那样，该方法仅用于代码可读性）

---

TL；DR:
如果尚未加载异步加载的对象，则不要访问这些对象的成员。

问题是您在模板属性中使用的属性可能还不存在。解释你的错误：

<p> Display the Issuer Name here: {{ issuerGroups.Issuer_Name }} </p>

这将始终失败，因为您的组件中根本没有定义

issuerGroup

字段

<p> Display the Issuer Name here: {{ issuerGroups[0].Issuer_Name }} </p>

以及在控制器中添加方法：

getIssuerName() {
    if (this.issuerGroups && this.issuerGroups.length > 0) {
        return this.issuerGroups.Issuer_Name[0];
    } else {
        return "";
    }
}

（当然，您可以在HTML文件中进行内联检查，就像其他人建议的那样，该方法仅用于代码可读性）

TL；DR:
如果尚未加载异步加载的对象，则不要访问这些对象的成员