Angular Academy · Pelajaran

Menggunakan Pipe Terbina Dalam

Formatkan tarikh, nombor dan teks dengan pipe.

Pelajaran 1 daripada 413 langkah

Menggunakan Pipe Terbina Dalam ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah Itu Paip?

Paip mengubah data secara langsung dalam templat untuk dipaparkan. Anda menulis nilai, aksara paip |, kemudian nama paip.

Paip sangat berguna untuk memformat tarikh, nombor, mata wang dan teks tanpa menulis logik komponen tambahan.

Sintaks Paip

Bentuk asasnya ialah {{ value | pipeName }}. Angular menghantar nilai kepada paip dan memaparkan hasil yang telah diubah.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

Paip uppercase dan lowercase

uppercase dan lowercase mengubah huruf besar kecil suatu rentetan. Kedua-duanya mudah dan biasa digunakan untuk label serta tajuk.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

Paip date

Paip date memformat objek Date atau cap masa menjadi rentetan yang mudah dibaca. Secara lalai, paip ini menggunakan format tarikh sederhana.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

Memformat Tarikh

Anda boleh menghantar rentetan format kepada paip date, seperti "shortDate", "fullDate" atau corak tersuai seperti "yyyy-MM-dd".

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

Paip currency

Paip currency memformat nombor sebagai wang. Secara lalai, paip ini menggunakan USD, tetapi anda boleh menghantar kod mata wang.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

Paip number dan percent

Paip number memformat nombor dengan pilihan digit, manakala percent memaparkan nilai sebagai peratusan.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

Memahami digitsInfo

Paip number menerima rentetan digitsInfo: minIntegerDigits.minFractionDigits-maxFractionDigits. Contohnya, "1.2-2" sentiasa memaparkan tepat dua tempat perpuluhan.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

Paip json

Paip json mengekodkan mana-mana objek menjadi rentetan JSON. Paip ini digunakan terutamanya untuk menyahpepijat templat supaya anda dapat melihat bentuk data anda.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

Paip slice

Paip slice mengembalikan sebahagian daripada tatasusunan atau rentetan, sama seperti slice dalam JavaScript. Paip ini berguna untuk memendekkan senarai.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

Mengimport Paip dalam Komponen Kendiri

Dalam komponen kendiri, anda mesti mengimport paip yang digunakan, contohnya DatePipe atau CurrencyPipe, daripada @angular/common.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

Semakan pantas

Uji pemahaman anda tentang paip terbina dalam.

Jawab dalam pelajaran interaktif

Imbas kembali

Anda telah mempelajari paip terbina dalam teras: uppercase, lowercase, date, currency, number, percent, json dan slice.

Paip mengekalkan pemformatan dalam templat dengan cara yang kemas dan deklaratif. Seterusnya, anda akan merantaikan paip dan menghantar argumen kepadanya.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menggunakan Pipe Terbina Dalam” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Menggunakan Pipe Terbina Dalam”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menggunakan Pipe Terbina Dalam”?

Formatkan tarikh, nombor dan teks dengan pipe. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Menggunakan Pipe Terbina Dalam” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy