घटक के रूप में कोणीय 2 तालिका पंक्तियाँ

Question

मैं angular2 2.0.0-beta.0 के साथ प्रयोग कर रहा हूं

मेरे पास एक टेबल है और लाइन सामग्री को इस तरह से कोणीय 2 द्वारा उत्पन्न किया जाता है:

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

अब यह काम करता है और मैं सामग्री को एक घटक "टेबल-लाइन" में संलग्न करना चाहता हूं।

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

और घटक में, टेम्पलेट में <tr> <td> सामग्री है।

लेकिन अब तालिका अधिक काम नहीं करती है। जिसका अर्थ है, सामग्री अब कॉलम में नहीं दिखाई जाएगी। ब्राउज़र में, निरीक्षक मुझे दिखाता है कि DOM तत्व इस तरह दिखते हैं:

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

मै इसे काम मे कैसे ले सकता हूँ?

Answer 1

मौजूदा तालिका तत्वों को चयनकर्ता के रूप में उपयोग करें

टेबल तत्व <table-line>बच्चों के रूप में तत्वों की अनुमति नहीं देता है और ब्राउज़र उन्हें ढूंढने पर उन्हें हटा देता है। आप इसे एक घटक में लपेट सकते हैं और फिर भी अनुमत <tr>टैग का उपयोग कर सकते हैं । बस "tr"चयनकर्ता के रूप में उपयोग करें ।

का उपयोग करते हुए <template>

<template>के रूप में अच्छी तरह से अनुमति दी जानी चाहिए, लेकिन अभी तक सभी ब्राउज़रों में काम नहीं करता है। Angular2 वास्तव <template>में DOM में कोई तत्व नहीं जोड़ता है , लेकिन केवल उन्हें आंतरिक रूप से संसाधित करता है, इसलिए इसका उपयोग Angular2 के साथ सभी ब्राउज़रों में भी किया जा सकता है।

चयनकर्ताओं को आकर्षित करें

एक अन्य तरीका विशेषता चयनकर्ताओं का उपयोग करना है

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

की तरह इस्तेमाल किया जा सके

<tr my-tr>

Comments

इसलिए मैं एक चयनकर्ता = 'tr' के साथ अपना TableItemComponent बनाऊंगा। लेकिन विभिन्न मुद्दों के लिए अन्य स्थानों में 'tr' का उपयोग कैसे कर सकते हैं?

— fbenoit

यदि मूल घटक में आपका कस्टम trटैग शामिल है तो इसका उपयोग किया जाएगा, अन्यथा यह डिफ़ॉल्ट ब्राउज़र व्यवहार होता है। तुम भी तरह अपने घटक चयनकर्ता के गुण या वर्गों में जोड़ सकते हैं <tr line-item>एक घटक चयनकर्ता के साथ "tr[line-item] "या <tr class="line-item">घटक चयनकर्ता के साथ tr.line-item। इस तरह आपका पूरा नियंत्रण है। मैं Angular2 में अभी तक खुद में से किसी की भी कोशिश नहीं की है, लेकिन मुझे यकीन है कि यह काम करता है।

— गुंटर ज़ोचबॉयर

क्या इसमें कोई वास्तविक खामी है? यह ठीक काम करता है, हालांकि इस के खिलाफ सिफारिश tslintकरने वाली शैली गाइड के लिए मुझे सीधे डिफ़ॉल्ट सेटिंग्स । मैं बंद करने से नापसंद नियम linting की सिफारिश की है, लेकिन जहाँ तक मैं बता सकता हूँ, यह (जैसे ओपी की समस्या के रूप में) एक काफी मनमाने ढंग से शैली नियम और कुछ स्थितियों में अपरिहार्य लगता है

— रोब

मुझे पूरा यकीन है कि इसमें कोई खामी नहीं है, सिवाय इसके कि तत्व चयनकर्ता अधिक सामान्य हैं और इसलिए डिफ़ॉल्ट होना चाहिए। यदि तालिका तत्वों या <li>इसी तरह का कोई मान्य मामला है , तो मुझे इसका उपयोग न करने का कोई कारण नहीं दिखता है।

— गुंटर ज़ोचबॉयर

मेरे घटक चयनकर्ता का उपयोग करना tr [लाइन-आइटम] काम करता है और कोणीय शैली गाइड नियम 05-03 के अनुरूप है जो tslint के खिलाफ शिकायत करता है।

— CM

Answer 2

मुझे उदाहरण बहुत उपयोगी लगा, लेकिन यह 2,2.3 बिल्ड में काम नहीं किया, इसलिए बहुत अधिक खरोंच के बाद कुछ छोटे बदलावों के साथ फिर से काम किया।

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(); }
}

Comments

बहुत बढ़िया जवाब। मैं तो बस जोड़ने के लिए किया था MyTrComponentकरने के लिए app.module.tsऔर काम करता है ठीक।

— टिटो लीवा

Answer 3

यहां एक विशेषता चयनकर्ता के साथ एक घटक का उपयोग करके एक उदाहरण दिया गया है:

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] ];
}

आउटपुट:

1   2   3
11  12  13

बेशक MyTrComponent में टेम्पलेट अधिक शामिल होगा, लेकिन आपको यह विचार मिलता है।

पुराना (Beta.0) प्लंकर ।

Comments

क्या रूट टैग के बिना एनजी घटक को प्रस्तुत करना संभव है? नॉकआउट में कुछ ऐसा <! - ko ->।

— एसएसएस

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

— मार्क राजकोक

यह बिल्कुल काम नहीं करता है (कोणीय 2.3 के साथ आजमाया गया)। त्रुटि फेंकी:Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'myTr' since it isn't a known property of 'tr'.

— वुकसिन

इसे काम करने के लिए आपको चयनकर्ता पर [] जोड़ना होगा। यह मत भूलना।

— दोपहर

Answer 4

घटक शैली में 'प्रदर्शन: सामग्री' को जोड़ना मेरे लिए काम करता है।

सीएसएस:

.table-line {
    display: contents;
}

HTML:

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

यह क्यों काम करता है?

घटक को संस्थापित करते समय, कोणीय (संकलन के बाद) घटक की सामग्री को DOM में लपेटता है:

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

लेकिन तालिका को ठीक से प्रदर्शित करने के लिए, trटैग को कुछ भी लपेटा नहीं जा सकता है।

तो, हम display: contentsइस नए तत्व में जोड़ते हैं । जैसा कि मैं समझता हूं, यह खोजकर्ता को यह बताने के लिए क्या है कि इस टैग को प्रदान नहीं किया जाना चाहिए, और आंतरिक सामग्री को प्रदर्शित करना चाहिए जैसे कि कोई लपेटकर नहीं था। इसलिए, जबकि टैग अभी भी मौजूद है, यह मेज पर नेत्रहीन रूप से प्रभावित नहीं करता है, और trटैग को ऐसे माना जाता है जैसे कि वे tableटैग के प्रत्यक्ष बच्चे थे ।

यदि आप इस बात की जांच करना चाहते हैं कि सामग्री कैसे काम करती है: https://bitsofco.de/how-display-contents-works/

Comments

जब संभव हो, कृपया केवल कोड के बजाय अतिरिक्त स्पष्टीकरण प्रदान करने का प्रयास करें। ऐसे उत्तर अधिक उपयोगी होते हैं क्योंकि वे समुदाय के सदस्यों की मदद करते हैं और विशेष रूप से नए डेवलपर्स समाधान के तर्क को बेहतर ढंग से समझते हैं, और अनुवर्ती प्रश्नों को संबोधित करने की आवश्यकता को रोकने में मदद कर सकते हैं।

— राजन

हाय @ राजन, टिप के लिए धन्यवाद। मुझे पता चला कि कैसे contentsकाम करता है, इसलिए मैं झूठी मान्यताओं के आधार पर जानकारी नहीं डालना चाहता था ... मैंने इसे समझाते हुए स्पष्टीकरण जोड़ा, लेकिन अगर कोई यह नोटिस करता है कि इस पर कोई त्रुटि है तो कृपया इसे इंगित करने के लिए स्वतंत्र महसूस करें ^ ^। मैंने एक लिंक भी जोड़ा ताकि लोग आगे की जांच कर सकें ... एक बात जिस पर मैंने गौर किया, जबकि यह कहता है कि यह IE11 पर काम नहीं करता है, मैंने इसे IE 11.657.18362.0 पर आज़माया और यह ठीक काम किया (लेकिन, जब से मैं हूँ कोणीय का उपयोग करते हुए, कहीं पॉलीफ़िल हो सकता है, इसलिए मैं इसे अन्य वातावरणों पर 100% गारंटी नहीं

— दूंगा

बहुत अच्छा जवाब। IMO इसे स्वीकार किया जाना चाहिए।

— adamsfamily

Answer 5

इसे इस्तेमाल करे

@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{}