Javascript 无法使用angular 2基于父子对象设置对象表示法

这里我是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>  

---

在我看来，正确的做法是在组件中创建正确的数据结构并在组件中显示

    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>

{{x}

或者，如果您特别希望在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> 

{{x.split（'.'）[0]}
{{x.split（'.'）[1]}

请参见此示例：

<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>