به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای)

مقدمه
AngularJS ، یکی از ویژگیهای مفید ارائه اولیه AngularJS ، امکان فیلتر و مرتب سازی داده ها در صفحه تنها با استفاده از متغیرهای قالب و فیلترها بود. اتصال داده دو طرفه از بسیاری از تبدیل گرها به AngularJS پیشی گرفت.
اما امروزه ، بسیاری از توسعه دهندگان اتصال داده های یک طرفه را ترجیح می دهند ، و فیلترهای orderBy و filter با ظهور Angular افول کردند. (توجه: در طول این مقاله از “AngularJS” برای اشاره به 1.x و از “Angular” برای اشاره به 2+ استفاده می کنم.)
اما چگونه قرار است به همان تأثیر برسیم؟ پاسخ در مؤلفه های ما نهفته است ، بنابراین اجازه دهید به یک پروژه ngUpgrade بنگریم و یاد بگیریم که چگونه این کار را انجام دهیم!
مرحله 1 – کد را از Git بیرون بکشید
ما در حال به روز کردن الگوی یک مؤلفه تازه بازنویسی شده هستیم. سپس ، مرتب سازی و فیلترینگ را اضافه خواهیم کرد تا کلیه عملکردهای موجود در AngularJS را بازیابی کنیم. این یک مهارت کلیدی برای توسعه فرآیند ngUpgrade میباشد.
برای شروع ، اندک زمانی برای کلون کردن پروژه نمونه ای که از آن استفاده خواهیم کرد، میگذاریم (فراموش نکنید که npm install را هم در پوشه های public و هم server اجرا کنید). این نکته را برای نقطه شروع خود بررسی میکنیم:
git checkout 9daf9ab1e21dc5b20d15330e202f158b4c065bc3
Copy

این پروژه نمونه یک پروژه ترکیبی ngUpgrade است که هم از AngularJS 1.6 و هم از Angular 4 استفاده می کند. یک API Express کاری و یک Webpack برای توسعه و تولید دارد. به راحتی به جستجو ، گرفتن و استفاده از الگوهای موجود در پروژه های خود بپردازید. اگر می خواهید نسخه ای از این پروژه را که از Angular 5 استفاده می کند ، جستجو کنید ، این مطلب را بررسی کنید. برای اهداف این آموزش ، تفاوت بین دو نسخه اهمیتی نخواهد داشت (من به موارد جزئی اشاره خواهم کرد).
مرحله 2 – دستور AngularJS را جایگزین کنید
در این مرحله از برنامه ، مولفه سفارشات ما در Angular بازنویسی می شود ، و تمام متعلقات آن وارد و حل می شوند. با این حال اگر بخواهیم برنامه خود را اجرا کنیم ، در خط کنسول شاهد خطاهایی هستیم که نشان دهنده مشکلات موجود در الگوی ماست. این همان چیزی است که ما ابتدا باید اصلاح کنیم. در الگوی سفارشات می خواهیم ترکیب AngularJS را جایگزین کنیم تا بتوانیم لود مسیر و سفارشات نمایش داده شده در صفحه را دریافت کنیم. سپس فیلترینگ و مرتب سازی را تنظیم خواهیم کرد.
اولین کاری که باید انجام دهیم خلاص شدن از شر تمام موارد ctrl $ در این الگو است. آنها دیگر در Angular لازم نیستند. ما فقط می توانیم یک find و replace برای پیدا کردن $ ctrl. پیدا کنیم. (نقطه را دقت کنید) و آن را با هیچ جایگزین کنید.
اکنون بگذارید data-ng-click را بر روی دکمه خود در خط 13 جایگزین کنیم. در Angular ، به جای ng-click ، ما فقط از رویداد click با پرانتز استفاده می کنیم تا نشان دهد که این یک رویداد است. براکت ها ورودی را نشان می دهند و پرانتز ها یک خروجی یا یک رویداد را نشان می دهند.
<button type=”button” (click)=”goToCreateOrder()” class=”btn btn-info”>Create Order</button>
Copy

ما فقط در اینجا می گوییم که در رویداد کلیک ، تابع goToCreateOrder را روی مؤلفه سفارشات خود اعمال کنید.
قبل از ادامه کار ، بیایید دقیقه ای را برای اثبات این که مؤلفه ما در حال حاضر در حال لود شدن است، اختصاص دهیم. در مورد کل div که سفارشات ما را لود می کند کامنت بگذارید (از خط 17 به بعد). برای اجرای برنامه ، یک ترمینال را باز کرده و دستورات زیر را اجرا کنید:
cd server
npm start

این سرور مجازی اکسپرس را شروع می کند. برای اجرای سرور مجازی dev Webpack ، یک ترمینال دیگر را باز کرده و اجرا کنید:
cd public
npm run dev

(می توانید این مراحل را برای ادامه این آموزش در حال اجرا نگه دارید).
باید ببینید که برنامه ما مجدد لود شده است. اگر به مسیر سفارشات بروید ، خواهید دید که مولفه سفارشات به درستی نمایش داده می شود.

همچنین می توانیم بر روی دکمه ایجاد سفارش کلیک کنیم و به درستی مسیر و فرم ایجاد سفارش را برای ما ارسال می کند.
اکنون اجازه دهید به HTML برگردیم.
بگذارید همه بقیه موارد data-ng-click را با نگهدارنده رویداد (click) جایگزین کنیم. می توانید از گزینه Find & Replace استفاده کنید یا فقط از میانبر ویرایشگر خود برای انتخاب همه موارد استفاده کنید (در کد VS برای ویندوز ، Ctrl + Shift + L است).
در مرحله بعد ، تمام وقایع data-ng-show را با * ngIf جایگزین کنید. در واقع هیچ معادل مستقیمی برای ng-show در Angular وجود ندارد ، اما این مورد خوبی است. بهتر است از * ngIf استفاده کنید ، زیرا به این ترتیب شما به جای مخفی کردن و نشان دادن آنها ، در واقع عناصر را از DOM اضافه و حذف می کنید. بنابراین ، تمام کاری که ما باید انجام دهیم این است که داده های -ng-show خود را پیدا کرده و با * ngIf جایگزین کنیم.
در آخر ، باید دو کار انجام دهیم تا بدنه جدول خود را درست کنیم. ابتدا data-ng-repeat را با *ngFor=”let order of orders” جایگزین کنید. توجه داشته باشید که ما در حال حذف فیلترهای orderBy و filter در آن خط هستیم تا کل مسیر به صورت زیر باشد:
<tr *ngFor=”let order of orders”>
Copy

دوما ، می توانیم پیشوند data-ng را قبل از لینک href به مسیر جزئیات سفارش حذف کنیم. همچنان AngularJS مسیریابی را در اینجا انجام می دهد ، اما ما دیگر نیازی به استفاده از این پیشوند نداریم زیرا اکنون این یک الگوی زاویه ای است.
اگر دوباره به برنامه نگاه کنیم ، می بینید که سفارشات به طور صحیح در صفحه لود می شوند:

البته چند اشکال وجود دارد. پیوندهای مرتب شده دیگر کار نمی کنند و اکنون currency ما (متغیر 8 بایتی) به نوعی مشکل دار است زیرا لوله currency (ارزی) در Angular کمی متفاوت از مشابه اش یعنی AngularJS میباشد. به آن هم خواهیم رسید. در حال حاضر ، این یک نشانه فوق العاده است ، زیرا بدان معنی است که داده های ما با مؤلفه سازگار شده اند و در صفحه لود می شوند.
بنابراین اصول اولیه این الگو را به Angular تبدیل کرده ایم. اکنون آماده هستیم تا مرتب سازی و فیلتر کردن را انجام دهیم!
مرحله 3 – افزودن مرتب سازی
سفارشات ما در صفحه لود می شوند ، اما هنوز روش سفارش و مرتب سازی آنها را نداریم. در AngularJS ، استفاده از فیلتر داخلی orderBy برای مرتب سازی داده ها در صفحه بسیار معمول بود. Angular دیگر فیلتر OrderBy ندارد. دلیل این امر آن است که اکنون به شدت توصیه میشود که آن نوع منطق کسب و کار را به جای داشتن آن در تمپلیت ، به مؤلفه تغییر دهید. بنابراین ، این کاری است که ما در اینجا می خواهیم انجام دهیم. (توجه: ما در اینجا می خواهیم از توابع و رویدادهای ساده قدیمی استفاده کنیم نه یک رویکرد شکلی واکنشی. این به این دلیل است که ما فقط سعی داریم مراحل اولیه را برای درک این موارد بگذرانیم. هنگامی که این مقدمات را پشت سر گذاشتید، به راحتی میتوانید با مشاهدات دیگر پیش بروید).
مرتب سازی در مولفه
ما در حال حاضر فیلتر orderBy را پس از تغییر آن به * ngFor از ng-repeat حذف کردیم. اکنون می خواهیم یک تابع مرتب سازی بر روی مؤلفه سفارشات ایجاد کنیم. می توانیم از رویدادهای کلیک در هدرهای جدول استفاده کنیم تا آن عملکرد را فراخوانی کنیم و در قسمتی که می خواهیم مرتب سازی کنیم ، اعمال نماییم. همچنین می خواهیم این عملکرد را بین صعود و نزولی در نوسان قرار دهیم.
بیایید مؤلفه سفارشات را باز کنیم (./orders/orders.component.ts) و دو ویژگی عمومی را به آن کلاس اضافه کنیم. اینها با دو ویژگی که الگوی ما از قبل ارجاع داده است مطابقت خواهند داشت. اولین مورد sortType از نوع رشته خواهد بود. مورد دوم sortReverse از نوع boolean خواهد بود و مقدار پیش فرض را false قرار می دهیم. خاصیت sortReverse فقط به این نکته توجه می کند که آیا ترتیب رعایت شده یا نه – روی آن به عنوان معادلی برای صعود یا نزول حساب نکنید.
بنابراین اکنون باید این مورد را بعد از اعلام عنوان در کلاس داشته باشید:
sortType: string;
sortReverse: boolean = false;

در مرحله بعدی ، ما عملکردی را که با استفاده از تابع نمونه اولیه Array.sort در JavaScript استفاده خواهیم کرد ، اضافه میکنیم. این را بعد از تابع goToCreateOrder (اما همچنان در داخل کلاس) اضافه کنید:
dynamicSort(property) {
return function (a, b) {
let result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
return result;
}
}

این عملکرد مرتب سازی پویا ، مقدار property اشیاء را در یک آرایه مقایسه می کند. فهم عملکرد سه تایی تو در تو می تواند در نگاه اول کمی پیچیده باشد، اما اساساً فقط این را می گوید که اگر مقدار property ما برای A کمتر از B است ، -1 را برگردان. در غیر این صورت ، اگر بیشتر است ، 1 را برگردان. اگر این دو برابر هستند ، 0 را برگردان.
اکنون ، مقایسه ای فوق العاده پیشرفته یا عمیق نیست. توابع کمکی پیشرفته تری وجود دارد که می توانید برای مرتب کردن آنها بنویسید و به راحتی آن را امتحان کنید. اگرچه ، این کار برای اهداف ما انجام می شود و می توانید با هر منطق مرتب سازی دلخواه که دوست دارید ، این منطق را جابه جا کنید.
بنابراین این تابع کمکی ماست. تابع مرتب سازی بر روی نمونه اولیه آرایه می تواند تابعی را به دست دهد که می تواند از آن برای مقایسه موارد در یک آرایه استفاده کند. بیایید تابعی بنام sortOrders را در کلاس خود قرار دهیم که که با تابع جدید dynamicSort از آن پیشی میگیرد:
sortOrders(property) { }
Copy

اولین کاری که ما باید انجام دهیم این است که sortType property را در کلاس خود برابر با property که در آن وارد شده است قرار دهیم. سپس می خواهیم ویژگی sortReverse را ضامن قرار دهیم. این خروجی را خواهیم داشت:
sortOrders(property) {
this.sortType = property;
this.sortReverse = !this.sortReverse;
}

اکنون می توانیم تابع sort را در this.orders فراخوانی کنیم ، اما عملکرد مرتب سازی پویا را وارد property خود میکنیم:
sortOrders(property) {
this.sortType = property;
this.sortReverse = !this.sortReverse;
this.orders.sort(this.dynamicSort(property));
}

و آخرین کاری که باید انجام دهیم این است که کمی تابع dynamicSort خود را اصلاح کنیم تا بتوانیم ترتیب آرایه را برای صعود یا نزولی معکوس کنیم. برای انجام این کار ، نتیجه dynamicSort را به ویژگی sortReverse بر روی کلاس پیوند می زنیم.
اولین کاری که انجام خواهیم داد اعلام متغیر است:
let sortOrder = -1;
سپس می توانیم بررسی کنیم که آیا خاصیت sortReverse در کلاس ما صحیح است یا نادرست. اگر درست باشد ، متغیر ترتیب مرتب سازی خود را برابر با 1 قرار می دهیم:
if (this.sortReverse) {
sortOrder = 1;
}

ما توابع خود را مانند این با هم امتحان میکنیم، زیرا ما به خاطر اهداف نمایشی و توضیحی ، توابع مرتب سازی خود را تغییر می دهیم. برای جامعیت بیشتر، یک رویکرد دیگر این است که به جای sortReverse که از طریق یک عملکرد جداگانه کنترل می شود ، یک متغیر به نام sortDescending داشته باشیم. اگر این مسیر را طی کنید ، برعکس عمل خواهید کرد – sortOrder برابر 1 خواهد بود ، مگر اینکه sortDescending صحیح باشد.
همچنین می توانیم این دو مورد آخر را با یک عبارت سه گانه ترکیب کنیم ، اما به خاطر عدم ابهام ، می خواهم آن را کمی واضح تر بیان کنم. و سپس فقط نتیجه خود را بر خلاف آنچه به طور معمول است قرار میدهیم، می توانم نتیجه را توسط sortOrder ضرب کنید. بنابراین تابع dynamicSort اکنون به صورت زیر است:
dynamicSort(property) {
let sortOrder = -1;

if (this.sortReverse) {
sortOrder = 1;
}

return function(a, b) {
let result = a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0;
return result * sortOrder;
};
}

باز هم ، این یک اجرای نمایشی از مرتب سازی است ، به طوری که شما می توانید مفاهیم اصلی استفاده از یک عملکرد مرتب سازی دلخواه را در مؤلفه خود درک کنید.
بیایید ببینیم مرتب سازی کارایی دارد یا خیر
تاکنون ، ما یک تابع کمکی dynamicSort و یک تابع sortOrders به کلاس اضافه کرده ایم تا بتوانیم به جای الگوی خود ، بر اساس مؤلفه خود مرتب کنیم.
برای دیدن اینکه این توابع در حال کار هستند ، اجازه دهید مرتب سازی پیش فرض را به تابع ngOnInit خود اضافه کنیم.
در داخل اشتراک forkJoin ما ، بعد از forEach که در آن نام مشتری را اضافه می کنیم ، اجازه دهید this.sortOrders را فراخوانی کنیم و property کل موارد را وارد کنیم:
this.sortOrders(‘totalItems’);
هنگامی که صفحه نمایش ریفرش می شود ، باید ببینید که سفارشات توسط کل آیتم ها در حال مرتب شدن هستند.
اکنون ما فقط باید با فراخوانی تابع sortOrders در پیوندهای مربوط به هدر جدول ، این مرتب سازی را بر روی الگوی خود پیاده سازی کنیم.
مرتب سازی را به تمپلیت اضافه کنید
تابع sortOrders برای مولفه سفارشات ما به درستی کار میکرد ، این بدان معنی است که اکنون ما آماده هستیم تا آن را به الگوی خود اضافه کنیم تا دوباره عناوین جدول قابل کلیک باشند.
قبل از انجام این کار ، اجازه دهید مرتب سازی پیش فرض در تابع ngOnInit خود را به ID تغییر دهیم:
this.sortOrders(‘id’);
این کمی طبیعی تر از استفاده از کل موارد است.
اکنون می توانیم روی الگوی خود کار کنیم. اولین کاری که می خواهیم انجام دهیم این است که تابع sortOrders را در تمام رویدادهای کلیک فراخوانی کنیم. می توانید نمونه های sortType = را انتخاب کرده و آنها را با ) sortOrders جایگزین کنید. سپس می توانید نمونه های ; sortReverse = !sortReverse را با ( جایگزین کنید.
همچنین باید دو مورد از نامهای property را که در اینجا وارد میکنیم ، و همچنین در موارد * ngIf اصلاح کنیم. 3 نمونه orderId را با id و 3 نمونه customername را با customerName جایگزین کنید.
آخرین کاری که باید انجام دهیم این است که هرکدام از برچسب های href را در سربرگ ها را به گونه ای در براکت ها قرار دهید که Angular پیشی بگیرد و این پیوندها در واقع به جایی نروند. رویداد کلیک چیزی است که کنسل شده است. بنابراین ، هدرها باید از این الگو پیروی کنند:
<th>
<a [href]=”” (click)=”sortOrders(‘id’)”>
Order Id
<span *ngIf=”sortType == ‘id’ && !sortReverse” class=”fa fa-caret-down”></span>
<span *ngIf=”sortType == ‘id’ && sortReverse” class=”fa fa-caret-up”></span>
</a>
</th>

به مرورگر بروید و تمام پیوندهای سرصفحه جدول خود را آزمایش کنید. باید ببینید که هر یک از propertyهای ما اکنون هم به صورت صعودی و هم نزولی مرتب می شوند.
این فوق العاده است، اما یک چیز را از دست دادیم – مکان نمای ما یک انتخاب کننده است نه یک نشانگر. بیایید آن را با CSS اصلاح کنیم.
تنظیم مکان نما
ما کار مرتب سازی خود را به درستی در صفحه سفارشات خود قرار داده ایم ، اما مکان نما اکنون به جای یک نشانگر انتخاب کننده است ، و این آزار دهنده میباشد.
چند روش مختلف وجود دارد که ما می توانیم از CSS برای رفع این مشکل استفاده کنیم:
⦁ می توانیم یک کلاس در فایل اصلی برنامه SCSS ایجاد کنیم.
⦁ می توانیم CSS خطی بنویسیم ، گرچه تقریباً هرگز ترجیح داده نمی شود.
⦁ می توانیم از CSS scoped Angular با استفاده از گزینه استایل در دکوراتور مولفه استفاده کنیم
می خواهیم با آخرین گزینه پیش برویم ، زیرا تنها کاری که باید انجام دهیم این است که یک قانون برای این مؤلفه خاص به استایل های خود اضافه کنیم.
دوباره کلاس کامپوننت سفارشات را باز کنید. در دکوراتور مؤلفه می توانیم یک ویژگی جدید به نام styles اضافه کنیم. سبک ها آرایه ای از رشته ها هستند ، اما رشته ها قوانین CSS میباشند. برای تنظیم نشانگر ، تنها کاری که باید انجام دهیم این است که یک قاعده بنویسیم که می گوید در یک ردیف جدول ، اگر پیوندی داریم ، خاصیت مکان نما را به نشانگر تغییر بده. دکوراتور ما اکنون چنین خواهد بود:
@Component({
selector: ‘orders’,
template: template,
styles: [‘tr a { cursor: pointer; }’]
})

اکنون ، هنگامی که مکان نما را روی سربرگ های ردیف خود معلق نگه میداریم، می بینیم که نشانگر را داریم. نکته جالب در مورد این رویکرد این است که این قانون CSS بر اجزای دیگر تأثیر نمی گذارد. این فقط روی مولفه سفارشات ما اعمال می شود!
حال ، ببینیم که آیا می توانیم کاری در مورد فیلتر کردن انجام دهیم یا نه. آن فیلتر filter از Angular حذف شد ، بنابراین ما باید خلاق باشیم و راهی برای اجرای آن در مؤلفه خود بیابیم.
مرحله 4 – اضافه کردن فیلتر
ما آماده هستیم جعبه فیلتر خود را که قبلاً از فیلتر AngularJS استفاده می کرد ، جایگزین کنیم تا بر اساس رشته ای که جستجو می کردیم ، بین مجموعه سفارشات جستجو کنیم. فیلتر AngularJS در الگوی ما قرار داشت و به کدی در کنترلر یا مؤلفه ما نیازی نداشت. امروزه آن نوع منطق موجود در الگو توصیه نمی شود. ترجیح می دهیم این نوع مرتب سازی و فیلتر را در کلاس مؤلفه های خود انجام دهیم.
یک تابع فیلتر اضافه کنید
به مؤلفه خود بازمیگردیم ، قصد داریم آرایه جدیدی از سفارشات را با نام filteredOrders تهیه کنیم. سپس می خواهیم آرایه سفارشات خود را به یک تابع فیلتر منتقل کنیم که آرایه filteredOrders را تنظیم می کند. سرانجام ، به جای آرایه اصلی خود ، از filteredOrders در الگوی خود در * ngFor استفاده خواهیم کرد. به این ترتیب ما هرگز داده های برگشتی از سرور مجازی را اصلاح نمی کنیم ، فقط از زیر مجموعه های آن استفاده می کنیم.
اولین کاری که انجام خواهیم داد ، اعلام property جدید در کلاس مان است:
filteredOrders: Order[];
Copy

سپس ، در ForkJoin ما که مجموعه اصلی سفارشات ما را تنظیم می کند ، می توانیم وضعیت اولیه filteredOrders را در آرایه سفارشات خود تنظیم کنیم:
this.filteredOrders = this.orders;
اکنون ما آماده اضافه کردن تابع خود هستیم که در واقع فیلتر را برای ما انجام خواهد داد. این تابع را درست بعد از توابع مرتب سازی در پایین مؤلفه پیست کنید:
filterOrders(search: string) {
this.filteredOrders = this.orders.filter(o =>
Object.keys(o).some(k => {
if (typeof o[k] === ‘string’)
return o[k].toLowerCase().includes(search.toLowerCase());
})
);
}

بگذارید در مورد آنچه در این عملکرد اتفاق می افتد صحبت کنیم. در ابتدا ، به تابع یک ویژگی جستجو می دهیم. سپس ، در میان سفارشات خود حلقه می زنیم و سپس تمام کلیدهای اشیاء را پیدا می کنیم. برای همه کلیدها ، می خواهیم ببینیم که آیا مقادیری از propertyها وجود دارد که با عبارت جستجوی ما مطابقت داشته باشد یا خیر. این بخش از جاوا اسکریپت در ابتدا می تواند کمی گیج کننده به نظر برسد ، اما اساساً همان چیزی است که اتفاق می افتد.
توجه داشته باشید که در عبارت if ما، صریحاً رشته ها را آزمایش می کنیم. اکنون در مثال فقط می خواهیم درخواست خود را به رشته ها محدود کنیم. نمی خواهیم سعی کنیم با propertyهای تو در تو ، توابع شماره یا چیزهای مشابه آن سروکار داشته باشیم. عبارت جستجوی ما با ویژگی نام مشتری ما مطابقت خواهد داشت ، و اگر بخواهیم آدرس یا هر نوع رشته دیگر را نمایش دهیم ، در میان آن ها نیز جستجو خواهیم کرد.
البته که می توانستیم این تابع را اصلاح کنیم تا اعداد را نیز بررسی کند یا به جستجوی لایه دیگری از اشیاء تو در تو بپردازد، و این کاملا به عهده شماست. درست مانند مرتب سازی، قصد داریم با اجرای نمایشی شروع کنیم و به شما امکان می دهیم تا از تخیل خود برای پیچیدگی بیشتر استفاده کنید.
در مورد تابع sortOrders ، قبل از شروع ، باید یک مورد آخر را روی کامپوننت انجام دهیم. فقط باید sortOrders را اصلاح کنیم تا اکنون از filteredOrders استفاده کند و نه سفارشات اصلی ما ، زیرا می خواهیم فیلتر نسبت به مرتب سازی اولویت داشته باشد. فقط آن را به این صورت تغییر دهید:
sortOrders(property) {
this.sortType = property;
this.sortReverse = !this.sortReverse;
this.filteredOrders.sort(this.dynamicSort(property));
}

اکنون ما آماده اجرای این فیلتر بر روی الگو هستیم.
اضافه کردن فیلتر به قالب
بیایید به الگوی خود برگردیم و آن را اصلاح کنیم تا از فیلترمان استفاده کند.
اولین کاری که باید انجام دهیم جایگزین کردن data-ng-model است. به جای آن ، می خواهیم از رویداد Keyup استفاده کنیم ، بنابراین “keyup” را می نویسیم و دو طرف آن را پرانتز میگذاریم ((keyup)). این یک رویداد داخلی در Angular است که به ما امکان می دهد تابعی را روی کلید up یک ورودی اجرا کنیم. از آنجا که ما تابع خود را filterOrders نامگذاری کردیم ، که قبلاً نام خاصیتی بود که در فیلتر AngularJS وارد کردیم ، فقط باید پرانتزهایی را در کنار آن اضافه کنیم. ورودی ما به این شکل است:
<input type=”text” class=”form-control” placeholder=”Filter Orders (keyup)=”filterOrders()”>
Copy

اما چه چیزی را به تابع سفارشات فیلتر منتقل می کنیم؟ خوب ، به طور پیش فرض ، رویدادها چیزی به نام $ event را وارد می کنند. این شامل چیزی به نام target است که بعدا مقدار ورودی را در بر می گیرد. یک مشکل در استفاده از $ event وجود دارد. ردیابی آن انواع سحابی بسیار دشوار است زیرا target.value واقعاً می تواند هر چیزی باشد. این امر اشکال زدایی را دشوار می کند و یا اینکه بدانیم چه نوع مقداری انتظار می رود. در عوض ، Angular یک ویژگی واقعاً خوب دارد که می توانیم انجام دهیم ، یعنی اختصاص یک متغیر قالب به این ورودی.
خوشبختانه ، Angular روشی را برای ما فراهم میکند که این کار را انجام دهد. بعد از برچسب ورودی ، می توانیم علامت هش (#) و سپس نام مدل دلخواه خود را اضافه کنیم. بیایید آن را ordersFilter # بنامیم. واقعاً فرقی نمی کند که در کجای این برچسب قرار دهید و یا آن را به چه نامی می خوانید ، اما من دوست دارم آن را بعد از ورودی قرار دهم تا بدین ترتیب ببینید که کدام مدل با کدام ورودی مرتبط می شود.
اکنون می توانم آن متغیر را به عملکرد filterOrders در رویداد keyup منتقل کنم. ما قبل از آن به نماد هش احتیاج نداریم ، اما لازم است .value را اضافه کنیم. این مقدار واقعی مدل و نه کل مدل را منتقل می کند. ورودی نهایی ما به این شکل است:
<input #ordersFilter type=”text” class=”form-control”
placeholder=”Filter Orders” (keyup)=”filterOrders(ordersFilter.value)”>

در آخر ، برای استفاده از آرایه filteredOrders به جای آرایه orders معمولی ، باید * ngFor خود را اصلاح کنیم:
<tr *ngFor=”let order of filteredOrders”>
Copy

بررسی محصول
می توانید ببینید اکنون که فیلترینگ و مرتب سازی ما در این مؤلفه قرار دارد، الگوی ما تا چه اندازه شکیل تر شده است.
اکنون بیایید این را در مرورگر بررسی کنیم. اگر متنی را مانند “sally” در باکس ورودی وارد کنید ، می بینید که سفارشات ما در حال تغییر است و مرتب سازی در بالای آن انجام می شود:

عالی است، ما یک ویژگی دیگر AngularJS را جایگزین کرده ایم!
اکنون آخرین موردی را که باید در مورد این مؤلفه انجام دهیم پیش رو داریم – تنظیم لوله currency.
مرحله 5 – تنظیم لوله ارزی
کار نهایی ما به روزرسانی فیلتر ارزی سابق است که اکنون در Angular لوله ارزی گفته می شود. فقط باید چند پارامتر به لوله در الگو اضافه کنیم که در AngularJS نیازی به مشخص کردن آن نبود. اگر از Angular 4 یا Angular 5 استفاده می کنید این قسمت متفاوت خواهد بود.
در زاویه 4 ، این کار را انجام دهید:
<td>{{order.totalSale | currency:’USD’:true}}</td>
در Angular 5+ ، این کار را انجام دهید:
<td>{{order.totalSale | currency:’USD’:’symbol’}}</td>
گزینه اول کد ارزی است (تعداد زیادی وجود دارد ، شما فقط به دلار آمریکا محدود نمی شوید!). مورد دوم نمایش نماد است. در Angular 4 ، این یک متغیر بولین است که نشان می دهد از نماد ارز یا کد استفاده می کنید. در Angular 5+ ، گزینه ها، symbol، codeیا symbol-narrow به صورت رشته هستند.
اکنون باید نماد مورد انتظار را مشاهده کنید:

و کار به پایان رسید! برای دیدن کد نهایی ، این لینک را بررسی کنید.
نتیجه
شما کار بزرگی انجام دادید که تا پایان این آموزش پیش آمدید! در اینجا چه کارهایی انجام داده ایم:
1- جایگزینی ترکیب قالب AngularJS با Angular
2- انتقال مرتب سازی بر روی مؤلفه
3- استفاده از سبک های CSS scoped
4- انتقال فیلتر به مؤلفه
5- جایگزینی فیلتر ارزی AngularJS با لوله ارزی Angular
باید از اینجا به کجا پیش بروید؟ کارهای زیادی وجود دارد که می توانید انجام دهید:
⦁ مرتب سازی را پیچیده تر کنید (برای مثال: اگر کاربر روی یک هدر جدید کلیک کند ، آیا باید ترتیب ها مجدداً تنظیم شوند یا همانطور باقی بماند؟)
⦁ فیلترینگ را پیچیده تر کنید (جستجوی شماره ها یا propertyهای تو در تو)
⦁ تغییر رویکرد واکنشی. شما می توانید به جای تابع keyup ، به مشاهده تغییرات مقداری گوش دهید و مرتب سازی و فیلتر کردن را در آنجا انجام دهید. استفاده از مشاهدات همچنین به شما امکان می دهد کارهای بسیار جالب مانند دیبانس (debounce) ورودی را انجام دهید!

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade