การแสดงผลตามเงื่อนไขด้วย @if
แสดงเนื้อหาตามเงื่อนไขด้วย @if และ @else
การแสดงผลตามเงื่อนไขด้วย @if เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
โฟลว์ควบคุมในตัว
แม่แบบ Angular สมัยใหม่มีบล็อก โฟลว์ควบคุมในตัว ซึ่งเขียนด้วยเครื่องหมาย @ บล็อกเหล่านี้มาแทนคำสั่งเชิงโครงสร้างแบบเดิมและไม่ต้องนำเข้า
บล็อก if
บล็อก at-if ใช้แสดงผลเนื้อหาแบบมีเงื่อนไข โดยเขียนเครื่องหมาย @ ตามด้วยคำว่า if เงื่อนไขในวงเล็บ และเนื้อหาในวงเล็บปีกกา
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }การแทนที่ ngIf
สิ่งนี้มาแทนคำสั่งเชิงโครงสร้างแบบเก่า *ngIf ไวยากรณ์ใหม่นี้เป็นส่วนหนึ่งของภาษาสำหรับแม่แบบ จึงไม่ต้องนำเข้าอะไร
การอ่านสัญญาณในเงื่อนไข
เงื่อนไขสามารถเป็นนิพจน์ใดก็ได้ รวมถึงการเรียกสัญญาณ
// @if (count() > 0) {
// <p>You have items</p>
// }บล็อก else
บล็อก at-else ใช้แสดงเนื้อหาสำรองเมื่อเงื่อนไขเป็นเท็จ โดยวางต่อจากวงเล็บปีกกาปิดของบล็อก if ทันที
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }สายโซ่ else if
คุณสามารถเชื่อมเงื่อนไขต่อกันด้วย at-else if แล้วปิดท้ายด้วย at-else
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }การเก็บผลลัพธ์ของเงื่อนไข
บล็อก at-if สามารถผูกผลลัพธ์ของเงื่อนไขไว้กับตัวแปรภายในด้วยคีย์เวิร์ด as ซึ่งมีประโยชน์สำหรับการจำกัดชนิดให้ไม่เป็นค่าว่าง
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }เหตุผลของไวยากรณ์ใหม่
โฟลว์ควบคุมในตัวอ่านง่ายกว่า ตรวจสอบชนิดได้ และมีประสิทธิภาพกว่าคำสั่งเชิงโครงสร้าง อีกทั้งยังไม่ต้องใช้ไวยากรณ์ย่อและเครื่องหมายดอกจันของคำสั่งแบบเก่า
ไม่ต้องมีองค์ประกอบครอบ
ต่างจากรูปแบบเดิม บล็อก at-if ไม่จำเป็นต้องมีองค์ประกอบครอบหรือ ng-template วงเล็บปีกกาจะเป็นตัวกำหนดขอบเขตของเนื้อหาแบบมีเงื่อนไขเอง
การซ้อนบล็อก
คุณสามารถซ้อนบล็อกโฟลว์ควบคุมได้อย่างอิสระ บล็อก at-if อาจมี at-if อีกบล็อกหนึ่ง at-for และอื่น ๆ อยู่ภายในได้
การใช้ร่วมกับการผูกค่า
ภายในบล็อก at-if คุณใช้ภาษาสำหรับแม่แบบได้อย่างเต็มรูปแบบ ทั้งการแทรกค่า การผูกคุณสมบัติ และการผูกเหตุการณ์ทำงานตามปกติ
ตรวจสอบอย่างรวดเร็ว: เงื่อนไข
ไวยากรณ์เงื่อนไขแบบใหม่
สรุป: เงื่อนไข
คุณได้เรียนรู้บล็อก at-if สำหรับการแสดงผลแบบมีเงื่อนไข โดยใช้ at-else และ at-else if สำหรับทางเลือกอื่น รวมถึงคีย์เวิร์ด as สำหรับเก็บผลลัพธ์ บล็อกนี้มาแทน star-ngIf และไม่ต้องนำเข้า ขั้นถัดไป: การวนซ้ำด้วย at-for
คำถามที่พบบ่อย
บทเรียน “การแสดงผลตามเงื่อนไขด้วย @if” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การแสดงผลตามเงื่อนไขด้วย @if” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การแสดงผลตามเงื่อนไขด้วย @if”
แสดงเนื้อหาตามเงื่อนไขด้วย @if และ @else คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การแสดงผลตามเงื่อนไขด้วย @if” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การแสดงผลตามเงื่อนไขด้วย @if
- การวนซ้ำด้วย @for
- การสลับด้วย @switch
- การโหลดแบบเลื่อนออกไปด้วย @defer