উপাদান হিসাবে কৌণিক 2 টেবিল সারি

Question 1

আমি কৌণিক ২.০.০-বিটা.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> সামগ্রী রয়েছে।

তবে এখন টেবিলটি আর কাজ করে না। যার অর্থ, সামগ্রীটি আর কলামগুলিতে প্রদর্শিত হবে না। ব্রাউজারে, পরিদর্শক আমাকে দেখায় যে ডোম উপাদানগুলি দেখতে দেখতে:

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

আমি এই কাজটি কীভাবে করব?

Question 2

নির্বাচক হিসাবে বিদ্যমান টেবিল উপাদান ব্যবহার করুন

সারণী উপাদান <table-line>উপাদানগুলিকে শিশু হিসাবে মঞ্জুরি দেয় না এবং ব্রাউজারগুলি যখন তাদের সন্ধান করে কেবল তখন তাদের সরিয়ে দেয়। আপনি এটিকে কোনও উপাদানগুলিতে মুড়িয়ে রাখতে পারেন এবং অনুমোদিত <tr>ট্যাগটি এখনও ব্যবহার করতে পারেন । কেবল "tr"নির্বাচক হিসাবে ব্যবহার করুন ।

ব্যবহার <template>

<template>পাশাপাশি অনুমতি দেওয়া উচিত তবে সমস্ত ব্রাউজারে এখনও কাজ করে না। অ্যাঙ্গুলার 2 আসলে কখনই ডিওমে কোনও <template>উপাদান যুক্ত করে না, তবে কেবল সেগুলি অভ্যন্তরীণভাবে প্রক্রিয়াজাত করে, সুতরাং এটি অ্যাঙ্গুলার 2 সহ সমস্ত ব্রাউজারেও ব্যবহার করা যেতে পারে।

বৈশিষ্ট্য নির্বাচক

আর একটি উপায় বৈশিষ্ট্য নির্বাচনকারীদের ব্যবহার করা select

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

মত ব্যবহার করা

<tr my-tr>

Question 3

উদাহরণটি আমি খুব উপকারী বলেছি কিন্তু এটি 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(); }
}

Question 4

কোনও অ্যাট্রিবিউট সিলেক্টরের সাথে একটি উপাদান ব্যবহার করার জন্য এখানে একটি উদাহরণ রয়েছে:

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

অবশ্যই মাইটিআরকমম্পোনেন্টে টেম্পলেটটি আরও জড়িত হবে, তবে আপনি ধারণাটি পাবেন।

পুরাতন (বিটা.0) প্লঙ্কার ।

Question 5

উপাদান শৈলীতে 'প্রদর্শন: সামগ্রী' যুক্ত করা আমার পক্ষে কাজ করেছে।

সিএসএস:

.table-line {
    display: contents;
}

এইচটিএমএল:

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

কেন এই কাজ করে?

কোনও উপাদান ইনস্ট্যান্স করার সময়, কৌণিক (সংকলনের পরে) ডিওমে থাকা উপাদানটির বিষয়বস্তু নিম্নরূপে জড়িয়ে দেয়:

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

টেবিলটি সঠিকভাবে প্রদর্শনের জন্য, trট্যাগগুলি কোনও কিছু দিয়ে মোড়ানো যায় না।

সুতরাং, আমরা display: contentsএই নতুন উপাদান যোগ করুন । আমি যেমন বুঝতে পেরেছি, এটি কী করে তা এক্সপ্লোরারকে এই ট্যাগটি রেন্ডার করা উচিত নয় এবং অভ্যন্তরীণ সামগ্রীটি এমনভাবে প্রদর্শন করা উচিত যেন কোনও মোড়ক নেই। সুতরাং, ট্যাগটি এখনও বিদ্যমান থাকলেও এটি টেবিলে চাক্ষুষভাবে প্রভাবিত করে না এবং trট্যাগগুলি এমনভাবে বিবেচনা করা হয় যেন তারা tableট্যাগের সরাসরি শিশু ।

আপনি কীভাবে বিষয়বস্তুগুলি কাজ করে সে সম্পর্কে আরও তদন্ত করতে চাইলে: https://bitofco.de/how-display-contents-works/

Question 6

এটা চেষ্টা কর

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