javascript - আনারভেলিং কৌণিক 2 বই, অধ্যায় 1, উদাহরণ 5



angular typescript (1)

আপনার খাঁটি পাইপ আছে তাই

এর পদ্ধতির transform কেবল তখনই কার্যকর করা হবে যখন এটি ইনপুট মানটিতে একটি খাঁটি পরিবর্তন সনাক্ত করে।

আপনার ক্ষেত্রে

*ngFor="let dive of dives | contentFilter:searchBox.value"

ইনপুট মানটি dives এবং searchBox.value

পাইপগুলিতে কৌনিক 2 গাইড অনুসারে:

খাঁটি পরিবর্তন হ'ল হয় আদিম ইনপুট মান (স্ট্রিং, সংখ্যা, বুলিয়ান, প্রতীক) বা পরিবর্তিত অবজেক্ট রেফারেন্স (তারিখ, অ্যারে, ফাংশন, অবজেক্ট)।

  • dive যুক্ত করা হলে অ্যারে রেফারেন্স (ডাইভস) পরিবর্তন করা হয় না - সুতরাং transform পদ্ধতিটি কার্যকর করা হয় না।
  • যখন ফিল্টার searchBox.value কিছু টাইপ করা হয় তখন searchBox.value পরিবর্তিত হয় - সুতরাং transform কার্যকর হয়।

সুতরাং সম্ভাব্য সমাধানগুলির মধ্যে একটি হ'ল প্রতিবার একটি ডিভ যুক্ত হওয়ার সাথে সর্বদা একটি নতুন রেফারেন্স অ্যারে থাকুন:

কেবল প্রতিস্থাপন করুন:

this.dives.push(this._stockDives[this._index++]);

সঙ্গে:

this.dives = this.dives.concat(this._stockDives[this._index++]);

বা:

this.dives = [...this.dives, this._stockDives[this._index++]];

এটি কাজ করার দ্বিতীয় উপায় হ'ল অপরিষ্কার পাইপ ব্যবহার:

@Pipe({name: 'contentFilter', pure: false })

পৃষ্ঠাটিতে ডাইভগুলির একটি তালিকা দেখানো হয়েছে, এতে একটি "নতুন ডাইভ যুক্ত করুন", "পরিষ্কার ডাইভস" এবং একটি অনুসন্ধান বাক্স রয়েছে যা প্রদর্শিত তালিকায় ফিল্টার করলেই এটি ফিল্টার করে।

এটি টেমপ্লেট:

<div class="container-fluid">

  <h1>My Latest Dives (Angular/TypeScript)</h1>
  <div class="row">
    <div class="col-sm-5">
      <button class="btn btn-primary btn-lg"
        [disabled]="!enableAdd()"
        (click)="addDive()">
          Add new dive
      </button>
      <button class="btn btn-danger btn-lg"
        (click)="clearDives()">
          Clear dives
      </button>
    </div>
    <div class="col-sm-4 col-sm-offset-3">
      <input #searchBox class="form-control input-lg"
        placeholder="Search"
        (keyup)="0" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4"
      *ngFor="let dive of dives | contentFilter:searchBox.value">
      <h3>{{dive.site}}</h3>
      <h4>{{dive.location}}</h4>
      <h2>{{dive.depth}} feet | {{dive.time}} min</h2>
    </div>
  </div>
</div>

এটি উপাদান উপাদান:

import {Component} from '@angular/core';

@Component({
  selector: 'divelog',
  templateUrl: 'app/dive-log.template.html'
})

export class DiveLogComponent {
  public dives = [];
  private _index = 0;
  private _stockDives = [
  {
    site: 'Abu Gotta Ramada',
    location: 'Hurghada, Egypt',
    depth: 72,
    time: 54
  },
  {
    site: 'Ponte Mahoon',
    location: 'Maehbourg, Mauritius',
    depth: 54,
    time: 38
  },
  {
    site: 'Molnar Cave',
    location: 'Budapest, Hungary',
    depth: 98,
    time: 62
  }];

  public enableAdd() {
    return this._index < this._stockDives.length;
  }

  public addDive() {
    if (this.enableAdd()) {
      this.dives.push(this._stockDives[this._index++]);
    }
  }

  public clearDives() {
    this.dives = [];
    this._index = 0;
  } 
}

এটি ফিল্টার কোড:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'contentFilter'})
export class ContentFilterPipe implements PipeTransform {

  transform(value: any[], searchFor: string) : any[] {
    if (!searchFor) return value;

    searchFor = searchFor.toLowerCase();
    return value.filter(dive => 
      dive.site.toLowerCase().indexOf(searchFor) >= 0 ||
      dive.location.toLowerCase().indexOf(searchFor) >= 0 ||
      dive.depth.toString().indexOf(searchFor) >= 0 ||
      dive.time.toString().indexOf(searchFor) >= 0);
  }
}

ফিল্টারটি চাওয়া হচ্ছে এবং যখনই আমি অনুসন্ধান বাক্সে টাইপ করব তখন তালিকাটি পুনরায় রেন্ডার হয়ে আসছে, তবে আমি যখন "যুক্ত" বোতামটি ক্লিক করব তখন নয়। আমার কাছে অনুসন্ধান বাক্সে কিছু থাকলে, "যুক্ত করুন" বোতামটি ডুব তালিকার পরিবর্তিত হয় না যদিও সন্ধান বাক্সের সামগ্রীটি নতুন আইটেমগুলি প্রদর্শিত হতে দেয়। আমি কোডটি কীভাবে পরিবর্তন করব যাতে "যোগ করুন" বোতামটি ক্লিক করলে ডাইভগুলির প্রদর্শিত তালিকার পুনঃস্থাপন হয়?





typescript