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

ตัวอย่าง dropdown-multiselect ใน Angular คือการใช้คอมโพเนนต์ mat-select ร่วมกับ mat-option ในการดึงข้อมูลมาแสดงในแบบฟอร์ม ตัวอย่างเช่น

<mat-select [(ngModel)]="selectedCountries">
  <mat-option *ngFor="let country of countries" [value]="country">
    {{ country }}
  </mat-option>
</mat-select>

ในตัวอย่างนี้ คอมโพเนนต์ mat-select จะดึงข้อมูลประเทศจากตัวแปร countries มาแสดงในแบบฟอร์ม ผู้ใช้สามารถเลือกประเทศได้หลายประเทศ โดยกดปุ่ม Ctrl หรือ Shift ค้างไว้ขณะเลือก

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

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

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

  countries = ['ไทย', 'อังกฤษ', 'สหรัฐอเมริกา', 'ญี่ปุ่น'];
  selectedCountries: string[] = [];

  constructor() {}

  ngOnInit() {
  }

  onSelectChange() {
    console.log(this.selectedCountries);
  }

}

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

<mat-select [(ngModel)]="selectedCountries">
  <mat-option *ngFor="let country of countries" [value]="country">
    {{ country }}
  </mat-option>
</mat-select>

<button (click)="onSelectChange()">เปลี่ยนประเทศ</button>

เมื่อรันตัวอย่างนี้ ผู้ใช้สามารถเลือกประเทศได้หลายประเทศ โดยกดปุ่ม Ctrl หรือ Shift ค้างไว้ขณะเลือก เมื่อเลือกประเทศแล้วกดปุ่ม “เปลี่ยนประเทศ” ค่าของตัวแปร selectedCountries จะเปลี่ยนแปลงตามไปด้วย

นอกจากนี้ ยังสามารถกำหนดค่าเริ่มต้นของ dropdown-multiselect ได้ด้วยการใช้คำสั่ง value ในคอมโพเนนต์ mat-select ตัวอย่างเช่น

<mat-select [(ngModel)]="selectedCountries" value="ไทย">
  <mat-option *ngFor="let country of countries" [value]="country">
    {{ country }}
  </mat-option>
</mat-select>

ในตัวอย่างนี้ ค่าเริ่มต้นของ dropdown-multiselect จะเลือกประเทศ “ไทย”

ตัวอย่างการใช้งาน dropdown-multiselect ใน Angular แบบเต็มที่มีค่าเริ่มต้น มีดังนี้

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

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

  countries = ['ไทย', 'อังกฤษ', 'สหรัฐอเมริกา', 'ญี่ปุ่น'];
  selectedCountries: string[] = ['ไทย'];

  constructor() {}

  ngOnInit() {
  }

  onSelectChange() {
    console.log(this.selectedCountries);
  }

}

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

<mat-select [(ngModel)]="selectedCountries" value="ไทย">
  <mat-option *ngFor="let country of countries" [value]="country">
    {{ country }}
  </mat-option>
</mat-select>

<button (click)="onSelectChange()">เปลี่ยนประเทศ</button>

เมื่อรันตัวอย่างนี้ ค่าเริ่มต้นของ dropdown-multiselect จะเลือกประเทศ “ไทย” เมื่อเลือกประเทศอื่นแล้วกดปุ่ม “เปลี่ยนประเทศ” ค่าของตัวแปร selectedCountries จะเปลี่ยนแปลงตามไปด้วย