无法使用角度2基于父子对象设置对象表示法

Question

这里我是angular和javascript的新手，我试图实现的是我有几个数据

data = ['middlename.firstname.lastname','firstname.lastname']; 

现在我使用下面的方法在.html中循环

<div *ngFor="let x of data">
<p *ngIf="x.indexOf('.')!==1">
{{x.split('.')[1]}}
</p>
</div>  

这是我的问题在数据中，如果你看到有"'middlename.firstname.lastname"，其中中间名是父级，其余的都是子级，因此在此基础上，我在前端显示在父级之后的位置1，直到这起作用。但是如果你看到第二个数据，这里有"firstname.lastname"，父级不在那里，所以它根据这里的位置"lastname"显示，我想显示firstname，即使它没有父级。

下面是我的堆栈地址

https://stackblitz.com/edit/angular-jmdaxg

Present output :
firstname
lastname
expected output :
firstname
lastname

Answer 1

在我看来，正确的做法是在组件中创建正确的dataStructure并在组件中显示。

dataToDisplay = this.data.reduce((acc, elem) => {
if (elem.indexOf('.') !== 1) {    // because you have done this check in your HTML
let nameSplit = elem.split('.');
if (nameSplit.length === 2) {
acc.push(nameSplit[0]);
}
else if (nameSplit.length === 3) {
acc.push(nameSplit[1])
}
return acc;
}
}, []);

然后在HTML中的dataToDisplay上循环以显示输出

<div *ngFor='let x of dataToDisplay'>
<p>{{x}}</p>
</div>

或者，如果你特别想在你的HTML中做这件事，那么你可以有这样的东西：

<div *ngFor="let x of data">
<p *ngIf="x.indexOf('.')!==1">
<ng-container *ngIf="x.split('.').length === 2">
{{x.split('.')[0]}}
</ng-container>
<ng-container *ngIf="x.split('.').length === 3">
{{x.split('.')[1]}}
</ng-container>
</p>
</div> 

请参见此示例：https://stackblitz.com/edit/angular-nkqxxa