Angular 2'de ekstra eleman olmadan ngIf kullanma


109

ngIfFazladan bir kap elemanı olmadan kullanabilir miyim ?

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

Bir tabloda çalışmaz çünkü bu geçersiz HTML yapar.

Yanıtlar:



21

Bunun için bir yöntem buldum: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .

Sadece <template>etiketi kullanabilir ve *ngIfbununla değiştirebilirsiniz [ngIf].

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

iyi ama * ng itslef bir templateetiket oluşturuyorsa , varsayılan olarak açısal yönergeler öneki * ile bir şablon etiketi oluşturur. yani ikisi de aynı[ngIf] and *ngIf
Pardeep Jain

1
İle *ngIfşablonun içinde bir elemanı var yazarsanız, yok templatekendini. Belirli koşullar altında, ekstra unsur müdahale edebilir.
Teak

/ Etiketinin içine templateetiket koyabilir miyiz ? trtd
Pankaj Parkar

Evet, özel bir unsur. Tanım gereği w3.org/TR/html401/struct/tables.html#h-11.2.3'e izin verilmez, ancak çalışacak ve işlenecektir. * Ng kullanıyorsam btw çalışmıyorsa. ama [ngIf] ile öyle. Bunun neden olduğunu bana söyleyebilir misiniz diye sorabilir miyim?
sascha10000

1
@ sascha10000 Sahip *ngIf="foo"olmak, sarma <template [ngIf]="foo">etiketine eşdeğerdir . Kısacası, template+ []== *, yani []! = *. hariç* herhangi bir öğede anlamlıdır . template
Franklin Yu

4

divDoğrudan içine koyamazsınız tr, bu geçersiz HTML olur. triçinde yalnızca td/ th/ tableöğesi olabilir ve bunların içinde başka HTML öğelerine sahip olabilirsiniz.

Sen biraz var HTML'nizi değişebilir *ngForüzerinde tbody& sahip ngIfüzerinde trkendisi aşağıda gibi.

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

Temelde sorunu çözecektir, ancak tbody ile edindiğiniz temel yeteneği değiştireceksiniz. Büyük bir masanız varsa, kafayı sabitleyebilir ve sadece gövdeyi kaydırabilirsiniz. Vücudunuz tr rolüne sahip olacak ve tr ek bir sarmalayıcı rolüne sahip olacaktır. Başı yukarı kaydırmaya ve sabitlemeye gerek yoksa, bu pragmatik bir çözümdür. Söylediklerime
sascha10000
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.