Conditionals and Loops

Shartlar va aylanishlar

Dinamik ma'lumotlarga asoslangan holda kontentni shartli ravishda ko'rsating va/yoki takrorlang.

Angular kabi framework'larning afzalliklaridan biri shundaki, ular dasturchilar duch keladigan umumiy muammolar uchun ichki yechimlarni taqdim etadi. Masalan, ma'lum shartga qarab kontentni ko'rsatish yoki ilova ma'lumotlariga asoslangan holda elementlar ro'yxatini yaratish.

Bu muammoni hal qilish uchun Angular shablonlaringizni qachon va qanday render qilishni framework'ga aytib beruvchi ichki boshqaruv oqimi bloklaridan foydalanadi.

Shartli render qilish

Dasturchilar tez-tez duch keladigan eng keng tarqalgan vaziyatlardan biri shablonlardagi kontentni shartga qarab ko'rsatish yoki yashirish istagidir.

Bunga misol sifatida foydalanuvchining ruxsat darajasiga qarab ekranda ma'lum boshqaruv elementlarini ko'rsatish yoki yashirishni aytish mumkin.

@if bloki

JavaScript'dagi if operatoriga o'xshab, Angular @if boshqaruv oqimi blokidan foydalanib, shablonning bir qismini va uning tarkibini shartli ravishda ko'rsatadi yoki yashiradi.

// user-controls.component.ts
@Component({
  standalone: true,
  selector: 'user-controls',
  template: `
    @if (isAdmin) {
      <button>Ma'lumotlar bazasini o'chirish</button>
    }
  `,
})
export class UserControls {
  isAdmin = true;
}

Ushbu misolda, faqat isAdmin xususiyati true bo'lsa, Angular <button> elementini render qiladi. Aks holda, u sahifada ko'rinmaydi.

@else bloki

@if bloki ko'p hollarda foydali bo'lsa-da, shart bajarilmaganda ham zaxira UI ko'rsatish keng tarqalgan.

Masalan, UserControls komponentida bo'sh ekran ko'rsatish o'rniga, foydalanuvchilarga ular autentifikatsiyadan o'tmaganliklari sababli hech narsa ko'rinmayotganligini bilishlari foydali bo'ladi.

Agar sizga zaxira kerak bo'lsa, JavaScript'dagi else qoidasiga o'xshab, @else blokini qo'shib xuddi shu effektga erishish mumkin.

// user-controls.component.ts
@Component({
  standalone: true,
  selector: 'user-controls',
  template: `
    @if (isAdmin) {
      <button>Ma'lumotlar bazasini o'chirish</button>
    } @else {
      <p>Sizga ruxsat berilmagan.</p>
    }
  `,
})
export class UserControls {
  isAdmin = true;
}

Ro'yxatni render qilish

Dasturchilar tez-tez duch keladigan yana bir keng tarqalgan vaziyat — elementlar ro'yxatini render qilish zaruriyati.

@for bloki

JavaScript'dagi for...of aylanishlariga o'xshab, Angular @for blokini qayta-qayta render qilish uchun taqdim etadi.

<!-- ingredient-list.component.html -->
<ul>
  @for (ingredient of ingredientList; track ingredient.name) {
  <li>{{ ingredient.quantity }} - {{ ingredient.name }}</li>
  }
</ul>

// ingredient-list.component.ts
@Component({
  standalone: true,
  selector: 'ingredient-list',
  templateUrl: './ingredient-list.component.html',
})
export class IngredientList {
  ingredientList = [
    {name: 'lag'mon', quantity: 1},
    {name: 'miso sho'rva', quantity: 1},
    {name: 'tuxum', quantity: 2},
  ];
}

Biroq, standart for...of aylanishidan farqli o'laroq, bu erda track degan kalit so'z borligini ko'rishingiz mumkin.

track xususiyati

Angular @for bilan elementlar ro'yxatini render qilganda, bu elementlar keyinchalik o'zgarishi yoki harakatlanishi mumkin. Angular har bir elementni qayta tartiblanganda kuzatib borishi kerak, odatda elementning bir xususiyatini noyob identifikator yoki kalit sifatida ishlatish orqali.

Bu ro'yxatdagi har qanday o'zgarishlar UI'da to'g'ri aks ettirilishi va Angular ichida to'g'ri kuzatilishini ta'minlaydi, ayniqsa, holatli elementlar yoki animatsiyalar bo'lsa.

Bunga erishish uchun biz Angular'ga track kalit so'zi bilan noyob kalitni taqdim etishimiz mumkin.

Keyingi qadam

Shablonlarni qachon va qanday render qilishni aniqlash imkoniyati bilan, endi ilovalarning muhim jihatini, ya'ni foydalanuvchi kiritmalarini qanday boshqarishni o'rganish vaqti keldi.

Ushbu sahifada