การใช้ ngIf โดยไม่มีองค์ประกอบพิเศษใน Angular 2

108

ฉันสามารถใช้ngIfโดยไม่มีองค์ประกอบคอนเทนเนอร์เพิ่มเติมได้หรือไม่

<tr *ngFor="...">
  <div *ngIf="...">
    ...
  </div>
  <div *ngIf="!...">
    ...
  </div>
</tr>

ไม่ทำงานในตารางเนื่องจากจะทำให้ HTML ไม่ถูกต้อง

html templates angular

— Janispritzkau
แหล่งที่มา

คำตอบ:

170

ng-containerเป็นที่ต้องการมากกว่าtemplate:

<ng-container *ngIf="expression">

ดู:

เชิงมุม 2 ng-container

https://github.com/angular/angular.io/issues/2303

— Alexander Taylor
แหล่งที่มา

คุณควรเพิ่มตัวอย่างข้อมูลโค้ด HTML "สร้าง" เพื่อให้ชัดเจนว่าไม่ได้สร้างองค์ประกอบ HTML <ng-container>

— Sergey

ผมพบว่าวิธีการที่เมื่อ: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

คุณสามารถใช้<template>แท็กและแทนที่*ngIfด้วย[ngIf]สิ่งนี้

<template [ngIf]="...">
  ...
</template>

— Janispritzkau
แหล่งที่มา

ดี แต่ * ng ถ้า itslef สร้างtemplateแท็กโดยค่าเริ่มต้นคำสั่งเชิงมุมคำนำหน้าด้วย * สร้างแท็กเทมเพลต ดังนั้นทั้งคู่จึงเหมือนกัน[ngIf] and *ngIf

— Pardeep Jain

เมื่อ*ngIfคุณมีองค์ประกอบภายในเทมเพลตคุณจะไม่ต้องเขียนtemplateเอง ภายใต้สถานการณ์บางอย่างองค์ประกอบพิเศษอาจรบกวน

— สัก

ใส่templatetag ไว้ข้างใน, tr/ tdtag ได้ไหม?

— Pankaj Parkar

ใช่มันเป็นองค์ประกอบพิเศษ ตามคำจำกัดความไม่อนุญาตให้ใช้w3.org/TR/html401/struct/tables.html#h-11.2.3แต่จะใช้งานได้และแสดงผล ถ้า Iam ใช้ * ngIf มันไม่ทำงาน btw. แต่ด้วย [ngIf] มันทำ ฉันขอถามได้ไหมว่าทำไมถึงบอกฉันได้?

— sascha10000

@ sascha10000 เพราะมี*ngIf="foo"เทียบเท่ากับ<template [ngIf]="foo">แท็กการห่อ ในระยะสั้นtemplate+ []== *ดังนั้น[]! = *. *ทำให้ความรู้สึกในองค์ประกอบใด ๆยกเว้น template

— Franklin Yu

คุณไม่สามารถใส่divเข้าไปข้างในได้โดยตรงtrซึ่งจะทำให้ HTML ไม่ถูกต้อง trสามารถมีtd/ th/ tableองค์ประกอบในนั้นและภายในคุณสามารถมีองค์ประกอบ HTML อื่น ๆ ได้

คุณสามารถเปลี่ยน HTML ของคุณเล็กน้อยเพื่อให้มี*ngForover tbody& have ngIfover trเองเหมือนด้านล่าง

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>

— พันกาจพาร์การ์
แหล่งที่มา

โดยพื้นฐานแล้วมันจะแก้ปัญหาได้ แต่คุณจะแลกกับความสามารถหลักที่คุณได้รับจาก tbody หากคุณมีโต๊ะขนาดใหญ่คุณสามารถยึดหัวได้เพียงแค่เลื่อนร่างกาย คนของคุณจะมีบทบาทของ tr และ tr จะมีบทบาทเป็น wrapper เพิ่มเติม หากไม่จำเป็นต้องเลื่อนและยึดส่วนหัวที่ด้านบนนี่เป็นวิธีแก้ปัญหาที่ใช้ได้จริง ข้อมูลอ้างอิงของฉันสำหรับสิ่งที่ฉันพูด: w3.org/TR/html401/struct/tables.html#h-11.2.3

— sascha10000