এনজিএক্স-ডেটাতেবল সারি-বিশদের অভ্যন্তরে গতিশীল উপাদান

Question

আমি এনজিএক্স-ডেটাটেবল ব্যবহার করে একটি পুনরায় ব্যবহারযোগ্য ডেটাটেবল তৈরি করছি এবং আমি সারি বিশদটির মধ্যে গতিশীল উপাদানগুলি রেন্ডার করতে চাই। ডেটাএটেবল উপাদানটি প্যারেন্ট মডিউল থেকে আর্গুমেন্ট হিসাবে একটি উপাদান বর্গ গ্রহণ করে এবং আমি কম্পোনেন্টফ্যাক্টরিটি তৈরির কম্পোনেন্ট ব্যবহার করি। আমি দেখতে পাচ্ছি যে কন্সট্রাক্টর এবং অনিট পদ্ধতিগুলি গতিশীল উপাদানগুলির জন্য চলছে তবে এটি ডিওএমের সাথে সংযুক্ত হচ্ছে না।

ডেটেটেবল এইচটিএমএল সারি-বিশদের জন্য দেখতে দেখতে এটি:

 <!-- [Row Detail Template] -->
        <ngx-datatable-row-detail rowHeight="100" #myDetailRow (toggle)="onDetailToggle($event)">
          <ng-template let-row="row" #dynamicPlaceholder let-expanded="expanded" ngx-datatable-row-detail-template>
          </ng-template>
        </ngx-datatable-row-detail>
 <!-- [/Row Detail Template] -->

এবং এটি আমার .ts ফাইলের মতো দেখাচ্ছে:

@ViewChild('myDetailRow', {static: true, read: ViewContainerRef}) myDetailRow: ViewContainerRef;
@ViewChild('dynamicPlaceholder', {static: true, read: ViewContainerRef}) dynamicPlaceholder: ViewContainerRef;

renderDynamicComponent(component) {
        var componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        var hostViewConRef1 = this.myDetailRow;
        var hostViewConRef2 = this.dynamicPlaceholder;
        hostViewConRef1.createComponent(componentFactory);
        hostViewConRef2.createComponent(componentFactory);
}

আর একটি বিষয় হ'ল যদি আমার #dynamicPlaceholderএনজি-টেম্পলেটটি এনজিএক্স-ডেটাটেবলের বাইরে রাখা হয় তবে এটি কাজ করে এবং ডায়নামিক মডিউলটি রেন্ডার এবং প্রদর্শিত হয়।

Comments

বিষয়বস্তু অভিক্ষেপের সাথে এটি করা। কম্পোনেন্ট ট্যাগের অভ্যন্তরে যে কোনও কিছু স্থাপন করা হয়, যতক্ষণ না উপাদানটির <ng-content>কোনও নেস্টড মার্কআপ রেন্ডার করার জন্য ট্যাগ থাকে re

— সি_অগু

আপনি দয়া করে আমার ক্ষেত্রে সাহায্যের জন্য একটি দ্রুত উদাহরণ দিয়ে আমাকে সাহায্য করতে পারেন?

— রাঘব কানওয়াল

Answer 1

<ng-template>রানটাইমের সময় আমরা কোনও টেম্পলেট ( ) এর সাথে কোনও উপাদান রেন্ডার করতে পারি না createComponent
কারণ আফাইক টেম্পলেটগুলি সংকলনের সময় অ্যাংুলার দ্বারা প্রক্রিয়া করা হয়। সুতরাং আমাদের একটি সমাধান দরকার যা সংকলনের সময়ে কাজ করে।

---

ত্রুটিগুলি সহ সমাধান

ng-content আমাদের এখানে সহায়তা করতে পারেন:

<!-- [Row Detail Template] -->
<ngx-datatable-row-detail rowHeight="100" (toggle)="onDetailToggle($event)">
   <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
      <ng-content></ng-content>
   </ng-template>
</ngx-datatable-row-detail>
<!-- [/Row Detail Template] -->

তারপরে আমরা আমাদের দেখতে চাইলে যে কোনও কিছু বিশদে দেখতে পারি:

<my-table>From the ouside but I cant access the current row :(</my-table>

তবে একটি সমস্যা রয়েছে: আমরা ng-contentযখন পাস করা টেম্পলেটটিতে বর্তমান সারিটি অ্যাক্সেস করতে চাই তখন আমরা ব্যবহার করতে পারি না ।

---

সমাধান

কিন্তু ngx-datatableআমাদের coveredেকে ফেলল আমরা ngx-datatable-row-detailনির্দেশে একটি টেম্পলেট পাস করতে পারি :

<ngx-datatable-row-detail [template]="myDetailTemplate "rowHeight="100" (toggle)="onDetailToggle($event)">
</ngx-datatable-row-detail>

তারপরে টেমপ্লেটটি @Inputভেরিয়েবলের মাধ্যমে বাইরের যে কোনও উপাদান থেকে প্রবেশ করা যায় :

<ng-template #myDetailTemplate let-row="row">
  From the outside with access to the current row: {{row.name}}
</ng-template>

স্ট্যাকব্লিটজ একবার দেখুন , আমি পোকmy-table হিসাবে একটি উপাদান লিখেছি ।

Answer 2

এমন উপাদান সংজ্ঞায়িত করুন যা এর সামগ্রী হিসাবে প্রকাশ করে TemplateRef

<ng-template #myTemplate let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>

    <div><strong>Address</strong></div>
    <div>{{ row?.address?.city }}, {{ row?.address?.state }}</div>
</ng-template>

এর ViewChildজন্য অ্যাক্সেসযোগ্য সম্পত্তি তৈরি করতে ব্যবহার করুনTemplateRef

export class DynamicComponent implements OnInit {

  @ViewChild("myTemplate",{static:true}) myTempalte : TemplateRef<any>
...
}

টেমপ্লেট ছাড়াই আপনার সারি বিশদটি সংজ্ঞায়িত করুন

<ngx-datatable-row-detail rowHeight="100" (toggle)="onDetailToggle($event)">
</ngx-datatable-row-detail>

নির্দেশকে অ্যাক্সেস করতে কোনও সম্পত্তি সংজ্ঞা দিন

@ViewChild(DatatableRowDetailDirective,{static:true}) templ:DatatableRowDetailDirective; 
 constructor(  
    private cfr: ComponentFactoryResolver, //import cfr
  )
....
toggleExpandRow(row) { 
   const factory = this.cfr.resolveComponentFactory<DynamicComponent>(
      DynamicComponent
    );

    const component = factory.create(this.injector,[]);   //create component dynamically
    this.templ._templateInput = component.instance.myTempalte; // set directives template to your components template 
    this.table.rowDetail.toggleExpandRow(row);
}

Stackblitz

সম্পাদনা করুন: আমি ngx-datatableউত্সের সাথে দু: খিত অংশটি অনুভব করেছি এটির ngx-datatable-row-detailকোনও উপাদান নয় তবে নির্দেশিকা এবং এটি ডোমের সাথে সংযুক্ত নেই। সুতরাং এটির কোনও ViewContainerরেফ নেই। এটি এতে ইনজেকশন উপাদানগুলিকে কিছুটা শক্ত করে তোলে। আপনি যা করতে পারেন তা হ'ল আপনার উপাদানগুলির টেম্পলেটগুলি সংজ্ঞায়িত করুন এবং এর ব্যবহার করুন TemplateRefএবং আপনি যেখানে আপনার উপাদানটি রেন্ডার করেন সেখানে সেগুলি নির্ধারণ করুন।

Comments

ইনপুট দেওয়ার জন্য ধন্যবাদ, আমি আপনার পদ্ধতি অবলম্বন করার চেষ্টা করেছি কিন্তু আমি el.setAttribute is not a functionউপাদান ফ্যাক্টরি.ক্রিয়া পদ্ধতিতে ত্রুটি পেয়েছি । কোন ধারণা কেন এমন হতে পারে? this.dynamicPlaceholder.elementRef.nativeElement একটি মন্তব্য ফেরত দেয়, তা কি হতে পারে?

— রাঘব কানওয়াল

@ রাঘবকণওয়াল আমার আপডেট হওয়া উত্তর দেখুন see

— এল্ডার