tiktok นับยอดวิวยังไง

ตัวอย่าง ngfor ใน Angular คือการใช้คอมโพเนนต์ ngFor เพื่อวนซ้ำค่าของตัวแปรหรืออาร์เรย์ ตัวอย่างเช่น

<div *ngFor="let item of items">
  {{ item }}
</div>

ในตัวอย่างนี้ คอมโพเนนต์ ngFor จะวนซ้ำค่าของตัวแปร items และแสดงค่าของแต่ละรายการใน div

ตัวอย่างการใช้งาน ngfor ใน Angular แบบเต็ม มีดังนี้

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  items = ['item1', 'item2', 'item3'];

  constructor() {}

  ngOnInit() {
  }

}

<h1>ตัวอย่างการใช้ ngFor</h1>

<div *ngFor="let item of items">
  {{ item }}
</div>

เมื่อรันตัวอย่างนี้ คอมโพเนนต์ ngFor จะวนซ้ำค่าของตัวแปร items และแสดงค่าของแต่ละรายการใน div

นอกจากนี้ ยังสามารถใช้คอมโพเนนต์ ngFor ร่วมกับคำสั่ง let เพื่อดึงข้อมูลของแต่ละรายการในอาร์เรย์ ตัวอย่างเช่น

<div *ngFor="let item of items; let i = index">
  {{ i }}: {{ item }}
</div>

ในตัวอย่างนี้ คอมโพเนนต์ ngFor จะวนซ้ำค่าของตัวแปร items และแสดงค่าของแต่ละรายการใน div พร้อมทั้งดึงค่าของ index ของรายการนั้นด้วย

ตัวอย่างการใช้งาน ngfor ใน Angular แบบเต็มที่มีการใช้คำสั่ง let มีดังนี้

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  items = ['item1', 'item2', 'item3'];

  constructor() {}

  ngOnInit() {
  }

}

<h1>ตัวอย่างการใช้ ngFor ร่วมกับคำสั่ง let</h1>

<div *ngFor="let item of items; let i = index">
  {{ i }}: {{ item }}
</div>

เมื่อรันตัวอย่างนี้ คอมโพเนนต์ ngFor จะวนซ้ำค่าของตัวแปร items และแสดงค่าของแต่ละรายการใน div พร้อมทั้งดึงค่าของ index ของรายการนั้นด้วย