Како користити нгФор Ангулар директиву

Ангулар користи директиве за динамичко приказивање одређених ХТМЛ елемената на вашој веб локацији. Једна од структурних директива коју можете користити је нгФор.

Директива нгФор вам омогућава да поновите исти блок одређени број пута или да прођете кроз низ објеката да бисте приказали њихове детаље. То је моћан алат који чак можете користити за приказивање објеката унутар других објеката.

Такође има много функција које могу бити корисне у одређеним сценаријима. Ово укључује проналажење првог и последњег елемента или прескакање одређених ставки.

Како користити нгФор за петљу кроз статичке бројеве

Директива нгФор је заснована на фор петљи, једној од многе корисне петље које ЈаваСцрипт подржава. Од тренутне верзије Ангулар-а (14), мораћете да креирате низ који има број ставки кроз које желите да прођете.

1. Можете креирати листу унутар саме изјаве нгФор. Следећи код ће поновити пасус пет пута, користећи индексе од 0 до 4:

   <див *нгФор='нека ставка од [0, 1, 2, 3, 4]; нека је и = индекс'>
   <стр> Ово је поновљени пасус: {{итем}} </п>
   </div>

2. Пошто горњи метод можда није прикладан за велике низове, такође можете динамички креирати низ у ТипеСцрипт датотеци:

   извоз класаПримерЦлассимплементираОнИнит{
    бројеви: Низ<број> = [];
   конструктор() {
   // Ово ће динамички креирати следећи низ:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   ово.бројеви = Низ(10).филл(1).мап((к, и)=>и);
    }
   }

3. Затим можете проћи кроз низ бројева у ХТМЛ-у:

   <див *нгФор='нека ставка бројева; нека је и = индекс'>
   <стр>Ово је поновљени пасус: {{итем}}</п>
   </div>

Како прескочити или стилизирати одређене бројеве

Можете користити одд или Чак нгЗа променљиве за одређивање сваког другог броја. Сценарио у којем би вам ово могло бити корисно је ако желите да стилизујете сваки непарни или парни ред у табели користећи другу боју.

1. У ЦСС датотеци за компоненту додајте неке нове ЦСС класе. Ово су стилови које ћете користити за одређене елементе на парним или непарним индексима:

   .ред {
    боја црвена;
   }
   .Плави { 
    боја: плава; 
   }
   

2. Декларисајте непарне и парне променљиве у оквиру нгФор изјаве. Ово су променљиве које ће Ангулар препознати. Доделите црвену ЦСС класу парним бројевима, а плаву ЦСС класу непарним бројевима:

   <див *нгФор='нека ставка бројева; нека одд = одд; нека чак = паран' [нгЦласс]="{црвено: парно, плаво: непарно}">
   <стр> Ово је поновљени пасус: {{итем}} </п>
   </div>

3. Покрените своју Ангулар веб локацију користећи нг служе и отворите га у веб претраживачу. Парни и непарни ХТМЛ елементи ће се смењивати између различитих стилова на основу њихове ЦСС класе:
4. Ако желите да у потпуности прескочите сваки паран број, можете користити директиву нгИф. Ово ће прескочити све непарне бројеве и приказати само парне бројеве:

   <див *нгФор='нека ставка бројева; нека чак = паран'>
   <п *нгИф='Чак'> Ово је поновљени пасус: {{итем}} </п>
   </div>

Како бројати уназад

Да бисте бројали уназад, можете користити традиционалне методе као што је преокретање листе или бројање уназад кроз петљу помоћу индекса.

1. Декларисајте променљиву индекса у нгФор изјави. Унутар нгФор, почните од дужине низа и одузмите број ставки кроз које сте већ прошли:

   <див *нгФор="нека ставка бројева; нека и = индекс;">
   <стр> Ово је поновљени пасус: {{нумберс.ленгтх-и-1}} </п>
   </div>

2. Такође можете да направите обрнуту листу у датотеци ТипеСцрипт:

   извоз класаПримерЦлассимплементираОнИнит{
    бројеви: Низ<број> = [];
    реверседЛист: низ<број> = [];
   конструктор() {
   ово.бројеви = Низ(10).филл(1).мап((к, и)=>и);
   ово.реверседЛист = ово.нумберс.слице().реверсе();
    }
   }

3. Итерирајте преко обрнуте листе користећи нгФор:

   <див *нгФор='нека ставка реверседЛист; нека је и = индекс'>
   <стр> Ово је поновљени пасус: {{итем}} </п>
   </div>

Како другачије стилизовати први и последњи елемент

Можете да стилизујете први и последњи елемент одвојено од осталих елемената користећи први и последњи Угаоне варијабле. Ово је алтернатива за користећи ЦСС псуедо-класе као :прво дете.

1. У наредби нгФор декларишете прву и последњу променљиву. Користите нгЦласс директиву да доделите плаве и црвене ЦСС класе у претходним корацима. Доделите плаву ЦСС класу првом елементу, а црвену ЦСС класу последњем елементу:

   <див *нгФор='нека ставка бројева; нека први = први; нека траје = последња' [нгЦласс]= "{плава: прва, црвена: последња}">
   <стр> Ово је поновљени пасус: {{итем}} </п>
   </div>

Како користити нгФор за понављање објеката

Можете користити директиву нгФор за петљу кроз објекте и приступ њиховим појединачним варијаблама.

1. Направите листу објеката у датотеци ТипеСцрипт. У овом случају, постојаће листа људи са њиховим детаљима:

   извоз класаПримерЦлассимплементираОнИнит{
    људи = []; 
   конструктор() {
   ово.пеопле = [
    { име: 'Јохн', презиме: 'Смитх', занимање: 'ХР менаџер', датум почетка: нови датум("2019-02-05") },
    { име: 'Мари', презиме: 'Јохнсон', занимање: 'Тецхницал Оффицер', датум почетка: нови датум("2016-01-07") },
    { име: 'Виллиам', презиме: 'Браон', занимање: 'Службеник за људске ресурсе', датум почетка: нови датум("2018-03-03") },
    ];
    }
   }

2. У ХТМЛ-у, користите петљу нгФор за петљу кроз листу људи. Свака особа ће бити доступна користећи особа променљива. Можете да користите променљиву персон да бисте приступили атрибутима сваке особе:

   <див *нгФор='нека особа од људи; нека је и = индекс'>
   <х2> {{персон.фирстНаме}} {{персон.фастНаме}} </h2>
   <стр> {{персон.оццупатион}} </п>
   <стр> {{персон.стартДате}} </п>
   </div>

Како користити угнежђени нгФор за приказ објеката унутар других објеката

Можете користити угнежђену фор петљу да прикажете објекте унутар других објеката.

1. Измените листу људи. Свака особа ће имати листу контаката за хитне случајеве. Чувајте сваки контакт за хитне случајеве као посебан објекат:

   ово.пеопле = [
    {
    име: 'Јохн',
    презиме: 'Смитх',
    Контакти за хитне случајеве: [
    {име: 'Аманда Смитх', однос: 'Жена', телефон: '0441239876' },
    {име: 'Барри Смитх', однос: 'синко', телефон: '0442239876'}
    ]
    },
    {
    име: 'Мари',
    презиме: 'Јохнсон',
    Контакти за хитне случајеве: [
    {име: 'Марк Јохнсон', однос: 'Муж', телефон: '0443239876' }
    ]
    },
    ];

2. У ХТМЛ-у направите угнежђену петљу унутар оригиналне петље да бисте прошли кроз сваки контакт за хитне случајеве и приказали њихове детаље:

   <див *нгФор='нека особа од људи; нека је и = индекс'>
   <х2> {{персон.фирстНаме}} {{персон.фастНаме}} </h2>
   <див *нгФор='нека контакт особе.емергенциЦонтацтс; нека је ј = индекс'>
   <х5> Контакти за хитне случајеве: </h5>
   <стр> {{Контакт Име}} </п>
   <стр> {{персон.релатионсхип}} </п>
   <стр> {{персон.пхоне}} </п>
   </div>
   <бр>
   </div>

Петља користећи нгФор у Ангулару

Можете користити структурну директиву нгФор да динамички прођете кроз ХТМЛ елементе на вашој веб локацији. Ово ће вам омогућити да поновите исти блок за одређени број објеката или одређени број пута.

Можете га користити и за друге трикове као што је прескакање сваког парног или непарног броја или стилизовање првог и последњег елемента. Можете га користити и за динамичко приказивање многих објеката унутар других објеката.

Постоје и друге Ангулар директиве које можете користити да учините своју веб локацију динамичнијом. То укључује нгИф, нгСвитцх, нгСтиле, нгЦласс и нгМодел.