পাইপ '' কৌনিক 2 কাস্টম পাইপটি পাওয়া যায়নি

Question

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

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

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

ব্যবহার:

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

ত্রুটি:

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">

কৌণিক সংস্করণ:

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"

Comments

আপনি এটি উপাদানগুলির পাইপগুলিতে অন্তর্ভুক্ত করেছিলেন?

— হ্যারি নিনাহ

আমি ঠিক বুঝতে পেরেছিলাম যে কারণ ছিল। কাস্টম পাইপের ক্ষেত্রে কৌনিক উদাহরণটি কখনই এটি করে না: কৌণিক.ইও

— রিসোর্স

তারা এটিকে বিশ্বব্যাপী পাইপ হিসাবে সংজ্ঞায়িত করেছে। আপনি যদি এটি অনেক জায়গায় ব্যবহার করেন এবং প্রতি একক টীকায় সংজ্ঞায়িত করতে না চান তবে আপনি নিজের কাস্টম পাইপতেও এটি করতে পারেন।

— হ্যারি নিনহ

@ সুমামাওয়াহেদ আমি নিশ্চিত যে ডক্সের কোনও সময়ে এটি ছিল, তবে আপনি ঠিক আছেন যে ডক্সটি এখন এটি উল্লেখ / প্রদর্শন করবেন না।

— Michelangelo

Answer 1

আপনি কোনও "ক্রস মডিউল" সমস্যার মুখোমুখি না হচ্ছেন তা নিশ্চিত করুন

পাইপটি ব্যবহার করছে এমন উপাদানটি যদি মডিউলটির সাথে না থাকে যা পাইপ উপাদানটিকে "বিশ্বব্যাপী" ঘোষণা করেছে তবে পাইপটি পাওয়া যায় না এবং আপনি এই ত্রুটি বার্তাটি পান।

আমার ক্ষেত্রে আমি পাইপটিকে একটি পৃথক মডিউল হিসাবে ঘোষণা করেছি এবং পাইপটি ব্যবহার করে অন্য কোনও মডিউলটিতে এই পাইপ মডিউলটি আমদানি করেছি।

আমি একটি ঘোষনা দিয়েছি যে আপনি যে উপাদানটি পাইপটি ব্যবহার করছেন তা হ'ল

পাইপ মডিউল

 import { NgModule }      from '@angular/core';
 import { myDateFormat }          from '../directives/myDateFormat';

 @NgModule({
     imports:        [],
     declarations:   [myDateFormat],
     exports:        [myDateFormat],
 })

 export class PipeModule {

   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

অন্য মডিউলে ব্যবহার (উদাহরণস্বরূপ অ্যাপ্লিকেশন.মডিউল)

  // Import APPLICATION MODULES
  ...
  import { PipeModule }    from './tools/PipeModule';

  @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

Comments

এই সমাধানটি কেবল আমার পক্ষে কাজ করেছিল। পাইপগুলির মডিউল থাকা দরকার

— এজে জেন

আমার পাইপটি আংশিকভাবে সমাধান করার জন্য এটি পাওয়া গেছে যে এনজি ২.৮-তে কোনও ত্রুটি পাওয়া যায় নি। * অতিরিক্তভাবে, আমার কেবল ব্যবহৃত নামকরণ কনভেনশন সম্পর্কিত টাইপস্ক্রিপ্ট "সতর্কতা" ছিল যা এগুলি সমাধান করার পরে এই কাস্টম পাইপটি সঠিকভাবে স্থানান্তরিত করতে অবদান রাখে এবং শেষ পর্যন্ত পাওয়া যায় being টেম্পলেট মধ্যে।

— সিএনএসকেটাইট

এটি সত্যই আমার জন্য একমাত্র সমাধান যা কাজ করেছিল! আমি পুরো ভাগ করা মডিউল জিনিসটি চেষ্টা করেছি, তবে এই সমাধানটি কবজির মতো কাজ করেছে। আপনাকে ধন্যবাদ কার্ল!

— lulu88

আমরা আমাদের উপাদান পরীক্ষায় এটি

— কীভাবে

ধন্যবাদ! আমার সমস্যাটি আমি "রফতানি: [মাইপাইপ]" মিস করে ভেবেছিলাম যে রফতানি কেবলমাত্র মডিউলগুলির জন্য!

— রফিক মোহাম্মদ

Answer 2

আপনাকে আপনার পাইপটি মডিউল ঘোষণায় অন্তর্ভুক্ত করতে হবে:

declarations: [ UsersPipe ],
providers: [UsersPipe]

Comments

কেবল একটি নোট, আমি মূলত সরবরাহকারীদের মধ্যে পাইপটি অন্তর্ভুক্ত করেছি। এটি মডিউল ফাইলের ঘোষণা এবং সরবরাহকারী উভয়ই অন্তর্ভুক্ত করা প্রয়োজন।

— গ্রেগ এ

আমি আপনার পরামর্শ অনুসরণ না করা পর্যন্ত আমি সংগ্রাম করে যাচ্ছিলাম। আমি এটি বের করার জন্য প্রায় 4 ঘন্টা নষ্ট করেছি আপনার পরামর্শের জন্য ধন্যবাদ।

— ব্যবহারকারী1501382

কেন এটি নথিভুক্ত করা হয় না? ডকুমেন্টেশনটিতে বলা হয়েছে You must include your pipe in the declarations array of the AppModule.: কৌণিক.আইও / গাইড / পাইপ । যাইহোক, আপনার উত্তর আমার সমস্যাও সমাধান করে।

— মার্টিজন

ধন্যবাদ, ইউভালস আমি একটি বিশদ যুক্ত করছি: যেখানে পাইপ আপনার প্রয়োজন মডিউল ঘোষণা।

— ভিনিসিয়াস টরেস

exports: [UsersPipe]মডিউলটি অন্য মডিউল দ্বারা আমদানি করা হচ্ছে কিনা তাও অন্তর্ভুক্ত করতে ভুলবেন না ।

— পূর্বাভাস

Answer 3

অয়নিকের জন্য আপনি @ কার্ল উল্লিখিত হিসাবে একাধিক সমস্যার মুখোমুখি হতে পারেন। আয়নিক অলস বোঝা পৃষ্ঠাগুলির জন্য নির্বিঘ্নে কাজ করা সমাধানটি হ'ল:

1. নিম্নলিখিত ফাইলগুলির সাথে পাইপ ডিরেক্টরি তৈরি করুন: পাইপস.টি এবং পাইপ.মডিউল.টস

// পাইপস.টি. সামগ্রী (এটি ভিতরে একাধিক পাইপ থাকতে পারে, শুধু মনে রাখবেন

use @Pipe function before each class)
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: "toArray" })
export class toArrayPipe implements PipeTransform {
  transform(value, args: string[]): any {
    if (!value) return value;
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key] });
    }
    return keys;
  }
}

// পাইপ.মডিউল.স. সামগ্রী

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { toArrayPipe } from "./pipes";

@NgModule({
  declarations: [toArrayPipe],
  imports: [IonicModule],
  exports: [toArrayPipe]
})
export class PipesModule {}

2. পাইপমোডুলকে অ্যাপ.মডিউল এবং @ এনজিএমডিউল আমদানি বিভাগে অন্তর্ভুক্ত করুন

   import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });

3. আপনি কাস্টম পাইপ ব্যবহার করতে চান সেখানে আপনার প্রতিটি। Module.ts এর মধ্যে পাইপস মোডুল অন্তর্ভুক্ত করুন। এটিকে আমদানি বিভাগে যুক্ত করতে ভুলবেন না। // উদাহরণ। ফাইল: পৃষ্ঠাগুলি / আমার-কাস্টম-পৃষ্ঠা / আমার কাস্টম-পৃষ্ঠা.মডিউল.টি

   import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })

4. এটাই. এখন আপনি আপনার টেমপ্লেটে আপনার কাস্টম পাইপটি ব্যবহার করতে পারেন। যাত্রা।

<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>

Comments

এটি আয়নিকের জন্য একটি জীবনদাতা ছিল, ধন্যবাদ। কারণ "আয়নিক জেনারেট পাইপ ...." পাইপস.মডিউল.টগুলি তৈরি করার মতো প্রয়োজনীয় সমস্ত পদক্ষেপ জেনারেট করে না। আপনার পদ্ধতির নিখুঁতভাবে কাজ করেছে। দ্রষ্টব্য, আয়নিক ভি 4 এর জন্য, আমদানির পথে কিছু ছোট পরিবর্তন প্রয়োজন।

— রোয়াপ্পা

আমি দেখেছি অ্যাপ্লিকেশনগুলিতে আপনার আমদানির দরকার নেই mod module.ts, যাতে সেই পদক্ষেপটি বাদ দেওয়া যায়। এটি অবশ্যই হবে কারণ এটি "ভাগ করা মডিউল" যেভাবেই একে অপরের মডিউলে যেখানে এটি প্রয়োজন সেখানে আমদানি করা হচ্ছে। এটি দুর্দান্ত লাগবে যদি অ্যাপ্লিকেশন.মডিউল আমদানি বিশ্বব্যাপী কাজ করে তবে আমি চেষ্টা করেছিলাম এবং এটি হয় না।

— রোয়াপ্পা

আমি এখনও এর মুখোমুখি আছি: কনসোল এরিওর ফাইল: নোড_মডিউলস/@angular/core/fesm5/core.js: 4002: 0 ত্রুটি ত্রুটি: অনাবৃত (প্রতিশ্রুতিতে): ন্যালি इंজেক্টর এরর: স্ট্যাটিকআইজেক্টর এরর (অ্যাপমোডিয়ুল -> স্ট্যাট্রাইনেস্ট্রিক) (প্ল্যাটফর্ম: কোর) [টুএইচটিএমটিপিপ -> ডোমসানাইটিজার]: নাল ইন্জেক্টর এরর: ডমসানাইটিজারের জন্য কোনও সরবরাহকারী নেই!

— মিরকোবাবিনী

Answer 4

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

পাইপগুলিকে সাবমডিউলে দৃশ্যমান নয় বলে সম্বোধন করতে আমি যে পদক্ষেপগুলি নিয়েছি তার সংক্ষিপ্তসার এখানে:

1. (পিতামাতার) ভাগ করা মোডুলের বাইরে পাইপ নিন এবং পাইপমোডুলে রাখুন
2. SharedModule এ পাইপমোডুল আমদানি করুন এবং রফতানি করুন ( পাইপমডুলের স্বয়ংক্রিয়ভাবে অ্যাক্সেস পাওয়ার জন্য SharedModule এর উপর নির্ভরশীল অ্যাপের অন্যান্য অংশের জন্য )
3. সাব-শ্যারডমডুলের জন্য, পাইপমোডুল আমদানি করুন, যাতে এটি অন্য সমস্যার মধ্যেও একটি বিজ্ঞপ্তি নির্ভরতা ইস্যু তৈরি করতে পারে এমন SharedModule পুনরায় আমদানি না করে পাইপমডুলিতে অ্যাক্সেস অর্জন করতে পারে।

উপরের "ক্রস মডিউল" উত্তরের আরও একটি পাদটীকা: যখন আমি পাইপমোডুল তৈরি করি তখন আমি ফর রুট স্ট্যাটিক পদ্ধতিটি সরিয়েছি এবং পাইপমডুল আমদানি করে আমার ভাগ করা মডিউলটি ছাড়াই। আমার প্রাথমিক বোঝাপড়াটি হ'ল ফর্ম রুট সিঙ্গলটনের মতো দৃশ্যের জন্য দরকারী যা ফিল্টারগুলিতে প্রয়োজনীয়ভাবে প্রয়োগ হয় না।

Comments

এটি যুক্ত করার জন্য আপনাকে ধন্যবাদ। এটি কেবলমাত্র একবার আমার জন্য সাব-শ্যারডমডুলিতে যুক্ত করা হয়েছিল

— jmcgrath207

হ্যাঁ এখানেই, আমি যে অংশটি অনুপস্থিত ছিল তা পাইপসমুদুলকে সাব-শ্যারডমডুলিতে আমদানি করছিল।

— টেন্ডারলাইন

Answer 5

এখানে বিকল্প উত্তর দেওয়ার পরামর্শ দেওয়া হচ্ছে :

পাইপের জন্য পৃথক মডিউল তৈরি করা প্রয়োজন হয় না তবে এটি অবশ্যই একটি বিকল্প। অফিসিয়াল ডক্স পাদটীকা দেখুন: https://angular.io/guide/pines#custom-pines

অন্তর্নির্মিত পাইপগুলি আপনি একইভাবে ব্যবহার করেন।
আপনাকে অবশ্যই আপনার পাইপটি অ্যাপমোডুলের ঘোষণার অ্যারেতে অন্তর্ভুক্ত করতে হবে। আপনি যদি কোনও পাইপকে ক্লাসে ইনজেকশন চয়ন করেন তবে আপনাকে অবশ্যই এটি আপনার এনজিএমডুলের সরবরাহকারী অ্যারেতে সরবরাহ করতে হবে।

আপনাকে যা করতে হবে তা হ'ল ঘোষণার অ্যারেতে আপনার পাইপ যুক্ত করতে হবে এবং আপনি যেখানে পাইপ ব্যবহার করতে চান সেখানে সরবরাহকারীদের অ্যারে রয়েছে module।

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]

Comments

তবে একটি একক পাইপ 2 মডিউলগুলির অংশ হতে পারে না .... উপরের পদ্ধতির এটি বিভিন্ন মডিউলগুলিকে আরও বেশি অ্যাক্সেসযোগ্য করে তোলে।

— হিমাংশু বানসাল

Answer 6

বিঃদ্রঃ : আপনি যদি কৌণিক মডিউলগুলি ব্যবহার না করেন তবেই

কিছু কারণে এটি ডক্সে নেই তবে আমাকে উপাদানটিতে কাস্টম পাইপ আমদানি করতে হয়েছিল

import {UsersPipe} from './users-filter.pipe'

@Component({
    ...
    pipes:      [UsersPipe]
})

Comments

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

— এবাবিন

ওহ ঠিক আছে আমি আসলে সেই উপাদানটির দিকে চেয়েছিলাম যা কাস্টম পাইপটি ব্যবহার করে। আমি জানতাম না অ্যাপ্লিকেশন মডিউলে এটি বিশ্বব্যাপী আমদানি করা যেতে পারে। ধন্যবাদ

— সুমামা ওয়াহেদ

ব্যবহারকারীদের-filter.pipe? কেন। পাইপ?

— নেদার ওয়েবার

এটি কেবল একটি নামকরণের কনভেনশন, ফাইলটিকে ইউজার্স-ফিল্টার.পিপ.স.স. বলা হয়

— সুমামা ওয়াহেদ

@ সচিন থ্যাম্পান হতে পারে কারণ আমার যখন মনে হয় কৌণিকটি আরসি 5 এ ছিল তখন থেকেই এই বিষয়গুলি বিশেষত এনজিমডুলের সাথে পরিবর্তিত হয়েছিল। দয়া করে এনজিডমডুলের জন্য ডকগুলি দেখুন

— সুমামা ওয়াহীদ

Answer 7

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

@Pipe({
  name: 'timePipe'
})
export class TimeValuePipe implements PipeTransform {

  transform(value: any, args?: any): any {
   var hoursMinutes = value.split(/[.:]/);
  var hours = parseInt(hoursMinutes[0], 10);
  var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
  console.log('hours ', hours);
  console.log('minutes ', minutes/60);
  return (hours + minutes / 60).toFixed(2);
  }
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  order = [
    {
      "order_status": "Still at Shop",
      "order_id": "0:02"
    },
    {
      "order_status": "On the way",
      "order_id": "02:29"
    },
    {
      "order_status": "Delivered",
      "order_id": "16:14"
    },
     {
      "order_status": "Delivered",
      "order_id": "07:30"
    }
  ]
}

Invoke this module in App.Module.ts file.

Answer 8

আমি পাইপগুলির একই ডিরেক্টরিতে পাইপগুলির জন্য একটি মডিউল তৈরি করেছি

import { NgModule } from '@angular/core';
///import pipe...
import { Base64ToImage, TruncateString} from './'  

   @NgModule({
        imports: [],
        declarations: [Base64ToImage, TruncateString],
        exports: [Base64ToImage, TruncateString]
    })

    export class SharedPipeModule { }   

এখন অ্যাপ্লিকেশনটিতে সেই মডিউলটি আমদানি করুন mod

import {SharedPipeModule} from './pipe/shared.pipe.module'
 @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

এখন এটি নেস্টেড মডিউলটিতে একই আমদানি করে ব্যবহার করা যেতে পারে