Невозможно установить объектную нотацию, основанную на родительском дочернем элементе, с использованием углового 2

здесь я новичок в угловых и javascript здесь, что я пытаюсь достичь, у меня есть пара данных

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

и теперь я зацикливаюсь в. < div * ngFor = "let x of data" > < p * ngIf = "x.indexOf ('.')! == 1" > {{ x . split ( '.' ) [ 1 ]}} </ p > </ div >, используя приведенный ниже подход 

Present output :
          firstname
          lastname
expected output :
          firstname
          lastname

Здесь моя проблема в данных, если вы видите, что есть «middlename.firstname.lastname», где среднее имя является родительским, и все остальные являются дочерними, поэтому на основе этого в переднем конце я показываю позицию 1, которая находится после родителя, до этого работает. Но если u видит 2-е данные, есть «firstname.lastname», здесь родителя нет, поэтому он отображается в соответствии с положением «Lastname» здесь, я хочу отобразить первое имя, даже если у него нет родителя.

ниже мой urlblitz

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

    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;
       }
    }, []);

javascript,angular,typescript,

0

Ответов: 1

0 принят

На мой взгляд, правильным было бы создать правильную структуру данных в вашем компоненте и отобразить в компоненте.

dataToDisplay

И затем переверните HTMLв своем HTMLокне, чтобы отобразить вывод

<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

JavaScript, угловая, машинопись,
Похожие вопросы
Яндекс.Метрика