পর্যবেক্ষণযোগ্য অ্যারের দৈর্ঘ্য কীভাবে পরীক্ষা করবেন

Question

আমার কৌণিক 2 উপাদানটিতে আমার একটি পর্যবেক্ষণযোগ্য অ্যারে রয়েছে

list$: Observable<any[]>;

আমার টেমপ্লেটে আমার আছে

<div *ngIf="list$.length==0">No records found.</div>

<div *ngIf="list$.length>0">
    <ul>
        <li *ngFor="let item of list$ | async">item.name</li>
    </ul>
</div>

তবে পর্যবেক্ষণযোগ্য অ্যারের ক্ষেত্রে তালিকা le। দৈর্ঘ্যের সাথে কাজ করে না।

হালনাগাদ:

দেখে মনে হচ্ছে (তালিকা as | async)? দৈর্ঘ্য আমাদের দৈর্ঘ্য দেয় তবে নীচের কোডটি এখনও কাজ করে না:

<div>
    Length: {{(list$ | async)?.length}}
    <div *ngIf="(list$ | async)?.length>0">
        <ul>
            <li *ngFor="let item of (list$ | async)">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

যে কেউ দয়া করে পর্যবেক্ষণযোগ্য অ্যারেটির দৈর্ঘ্য কীভাবে পরীক্ষা করবেন তা গাইড করতে পারেন।

Comments

এ রিপোর্ট github.com/angular/angular/issues/9641

— গুন্টার Zöchbauer

Answer 1

আপনি ব্যবহার করতে পারেন | async পাইপটি :

<div *ngIf="(list$ | async)?.length==0">No records found.</div>

আপডেট - কৌণিক সংস্করণ 6:

আপনি যদি কোনও সিএসএস স্কেলটন লোড করছেন তবে আপনি এটি ব্যবহার করতে পারেন। অ্যারেতে কোনও আইটেম না থাকলে এটি CSS টেমপ্লেটটি প্রদর্শন করবে। যদি তথ্য থাকে তবে পূরণ করুন ngFor।

<ul *ngIf="(list$| async)?.length > 0; else loading">
   <li *ngFor="let listItem of list$| async">
      {{ listItem.text }}
   </li>
</ul>

<ng-template #loading>
  <p>Shows when no data, waiting for Api</p>
  <loading-component></loading-component>
</ng-template>

Comments

আমি এটি চেষ্টাও করেছিলাম তবে এটি ত্রুটি দেয় "টাইপ এরির: নালার সম্পত্তি 'দৈর্ঘ্য' পড়তে পারে না"

— নাভিদ আহমেদ

আপনার প্রদত্ত তথ্যগুলি থেকে জানা শক্ত। চেষ্টা করুন <div *ngIf="(list$ | async)?.length==0">No records found.</div>(যুক্ত ?)

— গন্টার জ্যাচবাউয়ার

আমি এটি চেষ্টা করেছি এবং এটি <div * ngIf = "(তালিকা $ | async)? কাজ করে? দৈর্ঘ্য == 0"> কোনও রেকর্ড পাওয়া যায় নি </ </ ডিভি>

— নাভিদ আহমেদ

অতিরিক্তটি ?প্রয়োজন কারণ list$কেবলমাত্র Angular2 প্রথমবার দর্শনের চেষ্টা করার পরে সেট করা আছে । ?উপ-অভিব্যক্তি বাকি মূল্যায়ন করা না হওয়া পর্যন্ত অংশ বাম আটকায় ?হয়ে != null(এলভিস বা নিরাপদ-গৌণ অপারেটর)।

— গন্টার জ্যাচবাউয়ার

@ গন্তেরজ্যাচবাউর এটি আমার কাছে দেখে মনে হচ্ছে, প্রথম asyncপাইপটি ডেটা সমাধান করে এবং সেইজন্য asyncলুপে আমার পরবর্তী পাইপ কোনও কিছুই প্রদর্শন করে না। অথবা হতে পারে *ngIfএকটি অতিরিক্ত সুযোগ তৈরি করে এবং তাই এটি কাজ করছে না। বলা কঠিন. তবে আমার লুপটি ভিতরে আবৃত থাকলে যদি এটি কোনও ডেটা প্রদর্শন করে না। যদি নিজেই trueসঠিকভাবে মূল্যায়ন করে ।

— ইউজিন

Answer 2

.Ts- ফাইলগুলির জন্য একটি সমাধান:

     this.list.subscribe(result => {console.log(result.length)});

Comments

পরে তত্ক্ষণাত সাবস্ক্রাইব করা জরুরি নয়?

— পিটার

onDestroyউপাদানটিতে পর্যবেক্ষণযোগ্যদের থেকে সদস্যতা নেওয়া আরও ভাল

— থেপ্যাডেলিস

Answer 3

কৌণিক 4+ এর জন্য, এটি ব্যবহার করে দেখুন

<div *ngIf="list$ | async;let list">
    Length: {{list.length}}
    <div *ngIf="list.length>0">
        <ul>
            <li *ngFor="let item of list">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

Answer 4

যদিও এই উত্তরটি সঠিক

<div *ngIf="(list$ | async)?.length === 0">No records found.</div>

মনে রাখবেন যে আপনি যদি ব্যাকএন্ড কল করতে HTTP ক্লায়েন্ট ব্যবহার করছেন (বেশিরভাগ ক্ষেত্রে আপনি করেন) আপনি আপনার এপিআইতে নকল কল পাবেন যদি আপনার আরও একটি তালিকা থাকে $ | ASYNC । এটি কারণ প্রতিটি | অ্যাসিঙ্ক পাইপ আপনার তালিকায় নতুন গ্রাহক তৈরি করবে $ পর্যবেক্ষণযোগ্য।

Answer 5

এটিই আমার পক্ষে কাজ করেছিল -

*ngIf="!photos || photos?.length===0"

আমি httpClient async থেকে আমার ডেটা পাচ্ছি।

এখানে অন্যান্য সমস্ত অপশন আমার পক্ষে কাজ করে নি যা হতাশাব্যঞ্জক ছিল। বিশেষত সেক্সি (তালিকা as | async) পাইপ।

বান্টু ভাষা ..

Answer 6

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

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

Answer 7

পাশাপাশি ছোট করা যেতে পারে:

<div *ngIf="!(list$ | async)?.length">No records found.</div>

প্রথম বন্ধনের আগে বিস্মৃত চিহ্নটি ব্যবহার করুন।

Answer 8

আয়নিক 4

<div *ngIf="(items | async)?.length==0">No records found.</div>

আমি $সাইনটি সরিয়ে দিলে এটি কাজ করেছিল