Bileşen olarak Angular2 tablo satırları

103

Angular2 2.0.0-beta.0 ile deney yapıyorum

Bir tablom var ve satır içeriği bu şekilde angular2 tarafından üretiliyor:

    <table>
        <tr *ngFor="#line of data">
            .... content ....
        </tr>
    </table>

Şimdi bu işe yarıyor ve içeriği bir bileşen "tablo satırı" olarak kapsüllemek istiyorum.

    <table>
        <table-line *ngFor="#line of data" [data]="line">
        </table-line>
    </table>

Ve bileşende, şablon <tr> <td> içeriğine sahiptir.

Ama şimdi masa artık çalışmıyor. Bu, içeriğin artık sütunlarda gösterilmediği anlamına gelir. Tarayıcıda, denetçi bana DOM öğelerinin şöyle göründüğünü gösteriyor:

    <table>
        <table-line ...>
            <tbody>
                <tr> ....

Bunu nasıl çalıştırabilirim?

angular

— fbenoit
kaynak

114

mevcut tablo öğelerini seçici olarak kullan

Tablo öğesi, <table-line>öğelere alt öğe olarak izin vermez ve tarayıcı bunları bulduğunda yalnızca kaldırır. Bir bileşene sarabilir ve yine de izin verilen <tr>etiketi kullanabilirsiniz . Sadece "tr"seçici olarak kullanın .

kullanma <template>

<template>buna da izin verilmelidir, ancak henüz tüm tarayıcılarda çalışmıyor. Angular2 aslında DOM'a hiçbir zaman bir <template>öğe eklemez , ancak onları yalnızca dahili olarak işler, bu nedenle bu, Angular2 ile tüm tarayıcılarda da kullanılabilir.

Öznitelik seçiciler

Başka bir yol da öznitelik seçicilerini kullanmaktır

@Component({
  selector: '[my-tr]',
  ...
})

gibi kullanılmak

<tr my-tr>

— Günter Zöchbauer
kaynak

Bu yüzden TableItemComponent'ımı bir selector = 'tr' ile yaratırdım. Fakat başka yerlerde farklı sorunlar için 'tr' nasıl kullanılabilir?

— fbenoit

6

Ana bileşen özel tretiketinizi içeriyorsa, bu kullanılır, aksi takdirde varsayılan tarayıcı davranışı gerçekleşir. Ayrıca sevdiği bileşen seçicinin özelliklerini veya sınıfları ekleyebilir <tr line-item>bir bileşen seçici ile "tr[line-item] "veya <tr class="line-item">bileşen seçici ile tr.line-item. Bu şekilde tam kontrole sahip olursunuz. Bunların hiçbirini henüz Angular2'de denemedim, ancak bunun işe yaradığından oldukça eminim.

— Günter Zöchbauer

5

Bunun gerçek bir dezavantajı var mı? İyi çalışıyor, ancak varsayılan ayarlar tslintbeni buna karşı tavsiye eden stil kılavuzuna yönlendiriyor . Önerilen tüy bırakma kurallarını kapatmaktan hoşlanmıyorum, ancak anlayabildiğim kadarıyla, oldukça keyfi bir stil kuralı gibi görünüyor ve bazı durumlarda (örneğin OP'nin sorunu gibi) kaçınılmaz

— Rob

1

Öğe seçicilerin çok daha yaygın olması ve bu nedenle varsayılan olması gerektiği dışında hiçbir sakıncası olmadığından eminim. Tablo öğeleri veya benzeri geçerli bir durum varsa, <li>onu kullanmamam için herhangi bir neden göremiyorum.

— Günter Zöchbauer

2

Bileşen seçicimin tr [line-item] kullanmasını sağladım ve tslint'in şikayet ettiği Angular Style kılavuz kuralı STYLE 05-03'e uyuyor.

— CM

32

Örneği çok yararlı buldum ama 2,2.3 yapısında işe yaramadı, bu yüzden çok fazla kafa karıştırdıktan sonra birkaç küçük değişiklikle tekrar çalışmasını sağladı.

import {Component, Input} from '@angular/core'

@Component({
  selector: "[my-tr]",
  template: `<td *ngFor='let item of row'>{{item}}</td>`    
})
export class MyTrComponent {
  @Input("line") row:any;
}

@Component({
  selector: "my-app",
  template: `<h1>{{title}}</h1>
  <table>
    <tr  *ngFor="let line of data" my-tr [line]="line"></tr>
  </table>`

})
export class AppComponent {

  title = "Angular 2 - tr attribute selector!";
  data = [ [1,2,3], [11, 12, 13] ];
  constructor() { console.clear(); }
}

— DudeOfDoom
kaynak

1

Mükemmel cevap. Sadece eklemek zorunda MyTrComponentiçin app.module.tsve eserleri cezası.

— Tito Leiva

26

Öznitelik seçiciye sahip bir bileşen kullanan bir örneği burada bulabilirsiniz:

import {Component, Input} from '@angular/core';
@Component({
  selector: '[myTr]',
  template: `<td *ngFor="let item of row">{{item}}</td>`
})
export class MyTrComponent {
  @Input('myTr') row;
}
@Component({
  selector: 'my-app',
  template: `{{title}}
  <table>
    <tr *ngFor="let line of data" [myTr]="line"></tr>
  </table>
  `
})
export class AppComponent {
  title = "Angular 2 - tr attribute selector";
  data = [ [1,2,3], [11, 12, 13] ];
}

Çıktı:

1   2   3
11  12  13

Elbette MyTrComponent'teki şablon daha karmaşık olacaktır, ancak fikri anladınız.

Eski (beta.0) dalgıç .

— Mark Rajcok
kaynak

Ng bileşenini kök etiketi olmadan oluşturmak mümkün mü? Knockout.js'de <! - / ko -> gibi bir şey.

— Ssss

@PashaPasha, bkz stackoverflow.com/questions/34280475/…

— Mark Rajcok

14

Bu hiç çalışmıyor (açısal 2.3 ile denendi).

Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'myTr' since it isn't a known property of 'tr'.

— Atanan

Çalışması için Seçici'ye [] eklemeniz gerekir. Bunu unutma.

— Haziran'dan

7

Bileşen stiline 'display: content' eklemek benim için çalıştı.

CSS:

.table-line {
    display: contents;
}

HTML:

<table>
    <table-line class="table-line" [data]="line">
    </table-line>
</table>

Bu neden işe yarıyor?

Bir bileşeni örneklerken, açısal (derlemeden sonra) bileşenin içeriğini DOM'da şu şekilde sarar:

<table>
    <table-line>
        <tr></tr>
    </table-line>
</table>

Ancak tablonun düzgün görüntülenmesi için tretiketler hiçbir şey tarafından sarmalanamaz.

Böylece, display: contentsbu yeni unsura ekliyoruz . Anladığım kadarıyla, bunun yaptığı, gezgine bu etiketin işlenmemesi gerektiğini söylemek ve iç içeriği sanki etrafta hiç sarılmamış gibi göstermektir. Bu nedenle, etiket hala var olsa da, tabloyu görsel olarak etkilemez ve tretiketler, tableetiketin doğrudan alt öğeleri gibi ele alınır .

İçeriğin nasıl çalıştığını daha ayrıntılı araştırmak isterseniz: https://bitsofco.de/how-display-contents-works/

— Ruben Negredo
kaynak

1

Mümkün olduğunda, lütfen yalnızca kod yerine ek açıklama sağlamaya çalışın. Bu tür cevaplar, topluluk üyelerinin ve özellikle yeni geliştiricilerin çözümün gerekçesini daha iyi anlamalarına yardımcı olduklarından ve takip sorularını ele alma ihtiyacını önlemeye yardımcı olduklarından daha yararlı olma eğilimindedir.

— Rajan

Merhaba @ Rajan, bahşiş için teşekkürler. Nasıl contentsçalıştığını yeni keşfettim , bu yüzden yanlış varsayımlara dayanarak oraya bilgi koymak istemedim ... Anladığım kadarıyla açıklamayı ekledim, ancak biri üzerinde bir hata olduğunu fark ederse lütfen çekinmeden belirtebilirsiniz ^ ^. Ayrıca insanların daha fazla araştırma yapabilmesi için bir bağlantı ekledim ... Fark ettiğim bir şey, bunun IE11'de çalışmadığını söylese de, IE 11.657.18362.0'da denedim ve iyi çalıştı (ama ben açısal kullanıldığında, bir yerde çoklu dolgu olabilir, bu yüzden diğer ortamlarda% 100 garanti etmem)

— Ruben Negredo

Çok güzel cevap. IMO bu kabul edilmelidir.

— adamsfamily

Basit düzeltme. Kodu temiz tutar.

— bkbarton

-3

bunu dene

@Component({
    selecctor: 'parent-selector',
    template: '<table><body><tra></tra></body></table>'
    styles: 'tra{ display:table-row; box-sizing:inherit; }'
})
export class ParentComponent{
}

@Component({
    selecctor: 'parent-selector',
    template: '<td>Name</td>Date<td></td><td>Stackoverflow</td>'
})
export class ChildComponent{}

— Matsteel
kaynak