* ngFor специфическое состояние Угловое 2

Я этот код с *ngFor* ngFor специфическое состояние Угловое 2

settings = dropDownLists: [ 
    {name: 'Fac'}, 
    {name: 'Type'}, 
    {name: 'Course'}, 
    {name: 'Group'} 
] 

<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists"> 
    <div class="scheduleText"> {{dropDownList.name}} </div> 
</div>

Как напечатать результат, как это?

<div class="alingFloat"> 
    <div class="scheduleText"> Fac </div> 
    <div class="scheduleText"> Type </div> 
</div> 
<div class="alingFloat"> 
    <div class="scheduleText"> Curse </div> 
    <div class="scheduleText"> Group </div> 
</div>

источник

2017-02-21 Lestoroer

Можете ли вы показать все шаблон? Потому что я думаю, что у вас две петли –

Все это шаблон. – Lestoroer

Теперь я потерялся, вы спрашиваете, КАК печатать результат таким образом или ПОЧЕМУ результат выглядит так? –

Просто уточните свой массив/* ngFor на основе номера индекса. и поставить условие, которое вы хотите, как этот

settings = dropDownLists: [ 
    {name: 'Fac'}, 
    {name: 'Type'}, 
    {name: 'Course'}, 
    {name: 'Group'} 
] 



<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists; let i=index"> 
    <div class="scheduleText" *ngIf='i == 0'> Fac </div> 
    <div class="scheduleText" *ngIf='i == 1'> Type </div> 
</div> 
<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists; let i=index"> 
    <div class="scheduleText" *ngIf='i == 2'> Curse </div> 
    <div class="scheduleText" *ngIf='i == 3'> Group </div> 
</div>

Но этот метод обычно не предпочтительнее, если вы не определено нет выхода на рынок находится в массиве

источник

2017-02-21 05:20:16

Вы шутите? :) –

oh. Этот метод немного грязный. Спасибо за то, что вам нужно время, но нужно более ясно. – Lestoroer

no m serious @VolodymyrBilyachat, кстати, что здесь не так? –

Я не знаю, все дело, но если вы хотите печати DIV с двумя элементами Я хотел бы сделать что-л, как этот

var initArray = [{ name: 'Fac' }, 
    { name: 'Type' }, 
    { name: 'Course' }, 
    { name: 'Group' } 
    ]; 
    var settings = initArray.reduce(function (prev, item) { 
     var index = initArray.indexOf(item) % 2; 
     if (!prev[index]) prev[index] = []; 
     prev[index].push(item); 
     return prev; 
    }, []);

Затем в шаблоне

<div class="alingFloat" *ngFor="let dropDownList of settings;"> 
    <div class="scheduleText" *ngFor="let element of dropDownList;"> {{element.name}} 1</div> 
</div>

Результат

<div _ngcontent-axv-3="" class="alingFloat"> 
    <!--template bindings={}--><div _ngcontent-axv-3="" class="scheduleText"> Fac</div><div _ngcontent-axv-3="" class="scheduleText"> Course</div> 
    </div> 
    <div _ngcontent-axv-3="" class="alingFloat"> 
    <!--template bindings={}--><div _ngcontent-axv-3="" class="scheduleText"> Type</div><div _ngcontent-axv-3="" class="scheduleText"> Group</div> 
    </div>

источник

2017-02-21 05:55:29

Не работает. И TS с 'var'? – Lestoroer

Решение 1

<ng-container *ngFor="let dropDownList of settings.dropDownLists; let i = index; 
                    let even = even;"> 
    <div class="alingFloat" *ngIf="even"> 
     <div class="scheduleText"> {{settings.dropDownLists[i].name}} </div> 
     <div class="scheduleText" *ngIf="settings.dropDownLists[i+1]?.name"> 
      {{settings.dropDownLists[i+1].name}} 
     </div> 
    </div> 
</ng-container>

Раствор 2 и где я находился

<ng-container *ngFor="let dropDownList of settings.dropDownLists; let i = index; 
                    let even = even; 
                    let last = last;"> 
    <div class="alingFloat" *ngIf="even"> 
     <div class="scheduleText" *ngFor="let dropDownList2 of settings.dropDownLists | 
               slice:0: last ? 1 : 2; let k = index;"> 
      {{settings.dropDownLists[i+k].name}} 
     </div> 
    </div> 
</ng-container>

источник

2017-02-21 14:29:35 Lestoroer

Вместо '

* ngFor специфическое состояние Угловое 2

ответ

Смежные вопросы