angular - কৌণিক[ডুপ্লিকেট] এ কোনও উপাদানটিতে একাধিক টেম্পলেট বাইন্ডিং কীভাবে প্রয়োগ করতে হয়




angular-directive angular-template (3)

আপনার * এনজিআইফকে পিতামহক ডিভের মধ্যে রাখুন এবং * এনজিফোর্ড যেখানেই থাকতে পারে সেখানে থাকতে পারে।

উদাহরণ স্বরূপ:

<div *ngIf="itsNotF && itsNotF.length">
    <div [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    </div>
</div>

এই প্রশ্নের ইতিমধ্যে এখানে একটি উত্তর আছে:

আমি নিম্নলিখিতগুলির মতো টেমপ্লেট ব্যবহার করছি:

<ul [ngClass]="{dispN: !shwFilter,'list-group':true,'autoS':true,'dispB':shwFilter,'myshddw':true}" style=";display: none">
  <li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    <div *ngIf="valm1 && valm1.type=='1'">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <p style="margin: 8px;">{{valm1['body']}}</p>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
    <div *ngIf="valm1 && valm1.type=='2'" (click)="modlTxt=valm1;notREadVu(j)" data-toggle="modal" data-target="#myModal">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
    <div *ngIf="valm1 && valm1.type=='3'">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <p style="margin: 8px;">{{valm1['body']}}</p>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
  </li>
  <li [ngClass]="{bgDFF: !colps[j],'list-group-item':true,'lgOt':true}" (click)="logout()">
    <span class="title">Log Out <i class="fa fa-sign-out"></i></span>
  </li>
</ul>

সুতরাং এটি নিম্নলিখিত ত্রুটি দেয়:

EXCEPTION: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("one">
  <li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" [ERROR ->]*ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
"): [email protected]:94

পূর্বে এটি ত্রুটি দিচ্ছিল না আরসি 4 তে আপগ্রেড করার পরে আমি এই সমস্যার মুখোমুখি হয়েছি।

কাজটি কীভাবে কার্যকর, তাই আমি টেমপ্লেটের কাঠামো পরিবর্তন না করে একক উপাদানের উপর একাধিক টেম্পলেট বাইন্ডিং প্রয়োগ করতে পারি।


আপনি নথির কাঠামো সংরক্ষণের জন্য নিম্নলিখিত (প্রসারিত সংস্করণ) ব্যবহার করতে পারেন (যেমন আপনার সিএসএস নির্বাচকদের জন্য):

<template [ngIf]="itsNotF && itsNotF.length">
    <div [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    </div>
</template>

কৌণিক 2 (যেমন * এনজিআইএফ এবং * এনজিফোর্ড) এর একটি উপাদানের উপর দুটি টেম্পলেট বাঁধাই ব্যবহার করতে পারে না। তবে আপনি স্প্যান বা অন্য কোনও উপাদান দিয়ে উপাদানটি মুড়িয়ে এটি অর্জন করতে পারেন। একটি <ng-container> সাথে যুক্ত করা ভাল কারণ এটি একটি লজিক্যাল ধারক এবং এটি ডওমে সংযুক্ত হবে না। উদাহরণ স্বরূপ,

<ng-container *ngIf="condition">
    <li *ngFor="let item of items">
        {{item}}
    </li>
</ng-container>




angular-template