جدول داده های مواد زاویه ای: یک مثال کامل (صفحه بندی سرور ، فیلتر ، مرتب سازی)

در این پست ، ما می خواهیم نمونه کاملی از نحوه استفاده از جدول داده های مواد زاویه ای را طی کنیم.

ما قصد داریم بسیاری از موارد متداول استفاده را که در اطراف مؤلفه جدول داده مواد زاویه ای می چرخد ، مانند: صفحه بندی سمت سرور ، مرتب سازی و فیلتر کردن پوشش دهیم.

این یک آموزش گام به گام است ، بنابراین من از شما دعوت می کنم تا با یک سناریوی اولیه ساده شروع کنیم. سپس ما به تدریج ویژگی ها را یک به یک اضافه خواهیم کرد و همه چیز را در طول مسیر (از جمله GOTCHAS) توضیح خواهیم داد.

ما با جزئیات در مورد اصول طراحی واکنشی که در طراحی جدول داده های مواد زاویه ای و یک منبع داده CDK زاویه ای وجود دارد ، می آموزیم.

نتیجه نهایی این پست خواهد بود:

• یک نمونه کامل از نحوه اجرای یک جدول داده های مواد زاویه ای با صفحه بندی سمت سرور ، مرتب سازی و فیلتر با استفاده از یک منبع داده CDK سفارشی
• یک مثال در حال اجرا در GitHub ، که شامل یک سرور کوچک با پس زمینه اکسپرس است که در خدمت داده های صفحه بندی شده است

فهرست مطالب

در این پست مباحث زیر را پوشش خواهیم داد:

• جدول داده های مواد زاویه ای - نه تنها برای طراحی مواد
• طراحی واکنشی جدول داده های مواد
• صفحه اصلی و صفحه بندی سمت سرور
• هدرهای قابل مرتب سازی و مرتب سازی سمت سرور
• فیلتر سمت سرور با جعبه ورودی مواد
• یک نشانگر بارگیری
• منبع داده CDK مواد زاویه ای سفارشی
• کد منبع (در GitHub) با مثال کامل
• نتیجه گیری

بنابراین بدون آزار و اذیت بیشتر ، بیایید با تور راهنمای جدول داده های ما شروع کنیم!

وارد کردن ماژول های مواد زاویه ای

برای اجرای مثال ما ، بیایید ابتدا تمام ماژول های مواد زاویه ای را که به آن نیاز داریم وارد کنیم:

در اینجا تجزیه و تحلیل محتویات هر ماژول مواد وجود دارد:

• MatinputModule: این شامل مؤلفه ها و دستورالعمل های اضافه کردن جعبه های ورودی طراحی مواد به برنامه ما (مورد نیاز برای کادر ورودی جستجو)
• Mattablemodule: این ماژول جدول داده های اصلی است که شامل مؤلفه میز MAT و بسیاری از مؤلفه ها و دستورالعمل های مرتبط است
• Matpaginatormodule: این یک ماژول صفحه بندی عمومی است که می تواند برای صفحات داده ها به طور کلی استفاده شود. این ماژول همچنین می تواند به طور جداگانه از جدول داده ها استفاده شود ، به عنوان مثال برای اجرای منطق صفحه بندی جزئیات در یک مجموعه کارشناسی ارشد
• MatsortModule: این یک ماژول اختیاری است که امکان اضافه کردن هدرهای قابل مرتب سازی به جدول داده ها را فراهم می کند
• matprogressspinnermodule: این ماژول شامل مؤلفه نشانگر پیشرفت است که ما از آن استفاده خواهیم کرد تا نشان دهد که داده ها از پس زمینه بارگیری می شوند

آشنایی با جدول داده های مواد زاویه ای

مؤلفه جدول داده های مواد یک مؤلفه عمومی برای نمایش داده های جدول بندی شده است. اگرچه ما به راحتی می توانیم به آن ظاهری طراحی و احساس می کنیم ، اما این در واقع اجباری نیست.

در واقع ، ما می توانیم در صورت لزوم به جدول داده های مواد زاویه ای یک طرح جایگزین UI ارائه دهیم. برای دیدن این که چنین است ، بیایید با ایجاد یک جدول داده شروع کنیم که در آن سلولهای جدول فقط بخش های ساده و بدون CSS سفارشی استفاده نمی شوند.

این جدول داده لیستی از درس های دوره را نشان می دهد و دارای 3 ستون (شماره دنباله ، توضیحات و مدت زمان) است:

تعاریف ستون جدول داده های مواد

همانطور که می بینیم ، این جدول 3 ستون را تعریف می کند که هر یک در داخل عنصر NG-Container خاص خود هستند. عنصر NG-Container به صفحه نمایش داده نمی شود (برای اطلاعات بیشتر به این پست مراجعه کنید) ، اما عنصری برای استفاده از دستورالعمل MatColumnDef ارائه می دهد.

دستورالعمل MatColumnDef به طور منحصر به فرد یک ستون معین را با یک کلید مشخص می کند: SEQNO ، توضیحات یا مدت زمان. در داخل عنصر NG-Container ، تمام پیکربندی ها را برای یک ستون معین خواهیم داشت.

توجه کنید که ترتیب عناصر NG-Container ترتیب بصری ستون را تعیین نمی کند

دستورالعمل های تعریف کمکی جدول داده های مواد

جدول داده های مواد دارای مجموعه ای از دستورالعمل های ساختاری کمکی (با استفاده از نحو *Directivename) است که به ما امکان می دهد بخش های خاص الگو را علامت گذاری کنیم ، نقش خاصی در طراحی جدول داده های کلی دارد.

این بخشنامه ها همیشه با DEF Postfix به پایان می رسند و از آنها برای اختصاص نقش به بخش الگوی استفاده می شود. دو دستورالعمل اول که ما پوشش خواهیم داد MatheadercellDef و MatcellDef هستند.

دستورالعمل های MatheadercellDef و MatcellDef

در داخل هر NG-Container با تعریف ستون معین ، چند عنصر پیکربندی وجود دارد:

• ما الگویی داریم که نحوه نمایش هدر یک ستون معین را که از طریق دستورالعمل ساختاری MatheadercellDef مشخص شده است ، تعریف می کند
• ما همچنین یک الگوی دیگر داریم که نحوه نمایش سلولهای داده یک ستون معین را با استفاده از دستورالعمل ساختاری MATCELLDEF تعریف می کند

این دو دستورالعمل ساختاری فقط مشخص می کنند که کدام عناصر الگوی نقش مشخصی دارند (الگوی سلولی ، الگوی هدر) ، اما آنها هیچ یک از یک ظاهر طراحی شده را به آن عناصر وصل نمی کنند.

به عنوان مثال ، در این حالت ، Matcelldef و MatheadercellDef در قسمتهای ساده و بدون یک ظاهر طراحی شده اعمال می شوند ، بنابراین به همین دلیل هنوز این جدول طراحی مواد ندارد.

استفاده از یک طرح مواد در جدول داده ها

اکنون می بینیم که برای ارائه این جدول داده ها به نظر می رسد و چه چیزی به این میز داده می شود. برای این کار ، ما از چند مؤلفه داخلی در تعاریف هدر و الگوی سلولی خود استفاده خواهیم کرد:

این الگوی تقریباً مشابه نمونه ای است که قبلاً دیدیم ، اما اکنون ما به جای Divs Plain ، از اجزای سلول Mat-Header Cell و MAT در تعریف ستون خود استفاده می کنیم.

با استفاده از این مؤلفه ها ، اکنون می توانید نگاهی به جدول داده ها با این طراحی مواد جدید نگاهی بیندازیم:

توجه کنید که جدول قبلاً داده هایی دارد! ما در یک لحظه به منبع داده خواهیم رسید ، در حال حاضر بیایید به کاوش در بقیه الگوها ادامه دهیم.

دستورالعمل Matcelldef

الگوی سلول داده به داده هایی که نمایش داده می شود دسترسی دارد. در این حالت ، جدول داده های ما لیستی از درس ها را نمایش می دهد ، بنابراین شیء درس در هر سطر از طریق نحو LET درس قابل دسترسی است و دقیقاً مانند هر متغیر مؤلفه می تواند در الگوی استفاده شود.

مؤلفه Mat-Header-Row و بخشنامه MatheaderrowDef

این ترکیبی از مؤلفه / بخشنامه مرتبط به روش زیر کار می کند:

• Matheaderrowdef یک عنصر پیکربندی را برای ردیف هدر جدول مشخص می کند ، اما هیچ یک از یک ظاهر طراحی شده برای عنصر اعمال نمی شود
• از طرف دیگر ، ردیف حصیر از طرف دیگر برخی از مواد حداقل در حال استفاده را اعمال می کند

دستورالعمل MatheAderrowDef همچنین تعریف می کند که در آن ترتیب ستون ها باید نمایش داده شوند. در مورد ما ، بیان دستورالعمل به متغیر مؤلفه ای به نام نمایش داده های نمایش داده می شود.

در اینجا آنچه متغیر مؤلفه نمایش داده شده به نظر می رسد:

مقادیر این آرایه کلیدهای ستون هستند که باید با نام بخش های ستون NG-Container (که از طریق دستورالعمل MatColumnDef مشخص شده است) یکسان باشند.

توجه: این آرایه است که ترتیب بصری ستون ها را تعیین می کند!

مؤلفه MAT-ROW و دستورالعمل MatrowDef

این جفت مؤلفه / بخشنامه نیز به روشی مشابه با آنچه در موارد قبلی دیده ایم کار می کند:

• Matrowdef مشخص می کند که کدام عنصر در جدول MAT پیکربندی را برای چگونگی ظاهر یک ردیف داده فراهم می کند ، بدون ارائه یک ظاهر طراحی خاص
• از طرف دیگر ، MAT-ROW برخی از مطالب را در ردیف داده ارائه می دهد

با استفاده از MAT-ROW ، ما همچنین یک متغیر صادر شده است که ما Row را نامگذاری کرده ایم که حاوی داده های یک ردیف داده داده شده است ، و باید ویژگی ستون ها را مشخص کنیم ، که حاوی نظمی است که سلولهای داده باید در آن تعریف شوند.

تعامل با یک ردیف داده جدول معین

ما حتی می توانیم از عنصر مشخص شده توسط دستورالعمل MatrowDef برای تعامل با یک ردیف داده معین استفاده کنیم. به عنوان مثال ، اینگونه است که آیا می توانیم روی یک ردیف داده داده شده کلیک کنیم:

هنگامی که یک ردیف کلیک می شود ، ما با روش مؤلفه onRowClicked () تماس می گیریم ، که سپس داده های ردیف را به کنسول وارد می کنیم:

اگر اکنون روی ردیف اول جدول داده های خود کلیک کنیم ، در اینجا نتیجه ای است که نتیجه آن در کنسول به نظر می رسد:

همانطور که می بینیم داده های ردیف اول همانطور که انتظار می رود در کنسول چاپ می شود! اما این داده ها از کجا آمده است؟

برای پاسخ به این موضوع ، بیایید در مورد منبع داده ای که به این جدول داده مرتبط است صحبت کنیم و از طراحی واکنشی جدول داده های مواد استفاده کنیم.

منابع داده و طراحی واکنشی جدول داده ها

جدول داده هایی که ارائه کرده ایم ، داده هایی را که از یک منبع داده نمایش داده می شود که یک API مبتنی بر مشاهده را پیاده سازی می کند ، دریافت می کند و از اصول طراحی واکنشی متداول پیروی می کند.

به عنوان مثال این بدان معناست که مؤلفه جدول داده نمی داند داده ها از کجا آمده است. داده ها می توانند به عنوان مثال از پس زمینه یا از حافظه نهان مشتری ارائه شوند ، اما این در جدول داده ها شفاف است.

جدول داده ها به سادگی در یک مشاهده قابل مشاهده توسط منبع داده مشترک است. هنگامی که این قابل مشاهده مقدار جدیدی را منتشر می کند ، شامل لیستی از درسهایی خواهد بود که سپس در جدول داده ها نمایش داده می شود.

جدول داده ها اصول طراحی هسته

با استفاده از این API مبتنی بر مشاهده ، نه تنها جدول داده نمی داند که داده ها از کجا آمده اند ، بلکه جدول داده ها همچنین نمی داند چه چیزی باعث ورود داده های جدید شده است.

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

• جدول داده در ابتدا نمایش داده می شود
• کاربر روی دکمه Paginator کلیک می کند
• کاربر با کلیک بر روی یک هدر مرتب سازی بر روی داده ها مرتب سازی می کند
• کاربر با استفاده از یک کادر ورودی ، جستجو را تایپ می کند

مجدداً ، جدول داده ها هیچ اطلاعاتی در مورد دقیقاً کدام رویداد باعث ورود داده های جدید نمی شود ، که به اجزای و دستورالعمل های جدول داده اجازه می دهد تا فقط روی نمایش داده ها تمرکز کنند و از آن استفاده نکنند.

سپس ببینیم که چگونه می توانیم چنین منبع داده واکنشی را پیاده سازی کنیم.

چرا از MattableDatasource استفاده نمی کنیم؟

در این مثال ، ما از MattableDataSource داخلی استفاده نخواهیم کرد زیرا آن برای فیلتر ، مرتب سازی و صفحه بندی یک آرایه داده سمت مشتری طراحی شده است.

در مورد ما ، تمام فیلترها ، مرتب سازی و صفحه بندی روی سرور اتفاق می افتد ، بنابراین ما از اصول اول منبع داده واکنشی Angular CDK خود را می سازیم.

واکشی داده ها از پس زمینه

به منظور واکشی داده ها از پس زمینه ، منبع داده های سفارشی ما در حال استفاده از خدمات درس است. این یک سرویس Singleton بدون تابش مبتنی بر قابل مشاهده است که با استفاده از مشتری HTTP زاویه ای داخلی ساخته می شود.

بیایید نگاهی به این سرویس بیندازیم و نحوه اجرای آن را تجزیه کنیم:

شکستن اجرای دروس خدمات

همانطور که می بینیم ، این سرویس کاملاً بدون تابعیت است و هر روشی که با استفاده از مشتری HTTP به پس زمینه منتقل می شود ، و یک مشاهده کننده را به تماس گیرنده باز می گرداند.

API REST ما در URL های زیر دایرکتوری /API در دسترس است و چندین سرویس در دسترس است (در اینجا اجرای کامل است).

در این قطعه ، ما فقط روش findlessons () را نشان می دهیم ، که امکان دریافت یک صفحه فیلتر شده و مرتب شده از داده های دروس را برای یک دوره معین فراهم می کند.

در اینجا استدلالهایی وجود دارد که می توانیم به این عملکرد منتقل کنیم:

• CourseID: این یک دوره معین را مشخص می کند ، که برای آن می خواهیم صفحه ای از درس ها را بازیابی کنیم
• فیلتر: این یک رشته جستجو است که به ما کمک می کند تا نتایج را فیلتر کنیم. اگر رشته خالی را عبور دهیم "این بدان معنی است که هیچ فیلتر روی سرور انجام نمی شود
• SortOrder: Backend ما به ما اجازه می دهد تا بر اساس ستون SEQNO مرتب سازی کنیم ، و با این پارامتر می توانیم مشخص کنیم که ترتیب مرتب سازی صعودی است (که مقدار ASC پیش فرض است) ، یا با عبور از DESC مقدار نزول
• PAGENUMBER: با نتایج فیلتر شده و مرتب شده ، ما قصد داریم مشخص کنیم کدام صفحه از آن لیست کامل از نتایج مورد نیاز ما است. پیش فرض بازگشت صفحه اول (با فهرست 0) است
• PageSize: این اندازه صفحه را مشخص می کند ، که حداکثر 3 عنصر را پیش فرض می کند

با استفاده از این آرگومان ها ، روش Loadlessons () سپس HTTP را به نقطه پایانی پس زمینه موجود در /API /درس می رساند.

در اینجا یک تماس HTTP وجود دارد که درسهایی را برای صفحه اول به دست می آورد: به نظر می رسد:

http: // localhost: 4200/api/درس؟ CourseId = 1 & filter = & sortorder = asc & pagenumber = 0 & pagesize = 3 

همانطور که می بینیم ، ما با استفاده از API HTTPParams Fluent ، یک سری از پارامترهای پرس و جو HTTP را به URL دریافت می کنیم.

این روش Loadlessons () پایه و اساس منبع داده ما خواهد بود ، زیرا به ما امکان می دهد موارد استفاده از سرور ، مرتب سازی و فیلتر کردن را پوشش دهیم.

اجرای یک منبع داده CDK زاویه ای سفارشی

با استفاده از خدمات درس ، اکنون یک منبع داده CDK زاویه ای مبتنی بر مشاهده سفارشی را اجرا کنیم. در اینجا چند کد اولیه وجود دارد ، به طوری که می توانیم در مورد طراحی واکنشی آن بحث کنیم (نسخه کامل در یک لحظه نشان داده شده است):

شکستن طراحی یک منبع داده CDK زاویه ای

آیا می توانیم ببینیم ، برای ایجاد یک منبع داده ، باید کلاس ایجاد کنیم که DataSource را پیاده سازی کند. این بدان معنی است که این کلاس نیاز به اجرای چند روش دارد: اتصال () و قطع ().

توجه داشته باشید که این روش ها استدلالی را ارائه می دهند که یک مجموعه SolwiteVer است ، که یک مشاهده را ارائه می دهد که اطلاعاتی را در مورد آنچه داده ها نمایش داده می شود منتشر می کند (شاخص شروع و شاخص پایان).

ما در حال حاضر توصیه می کنیم که در این لحظه به این مسئله توجه زیادی بر روی CollectionViewer نکشید ، اما برای درک کل طراحی: مقدار بازگشت روش Connect () بسیار مهمتر است.

نحوه اجرای روش DataSource Connect ()

این روش یک بار توسط جدول داده ها در جدول Bootstrap Time نامیده می شود. جدول داده ها انتظار دارند که این روش یک مشاهده را بازگرداند و مقادیر آن قابل مشاهده حاوی داده هایی است که جدول داده ها برای نمایش نیاز دارند.

در این حالت ، این مشاهده لیستی از درس ها را منتشر می کند. از آنجا که کاربر بر روی صفحه بندی کلیک می کند و به صفحه جدید تغییر می کند ، این مشاهده با صفحه درس های جدید مقدار جدیدی را منتشر می کند.

ما این روش را با استفاده از موضوعی که در خارج از این کلاس نامرئی باشد ، پیاده سازی خواهیم کرد. این موضوع (درسها) مقادیر بازیابی شده از پس زمینه را منتشر می کند.

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

چرا از رفتارهای استفاده می کنید؟

استفاده از BehaviOrsubject یک روش عالی برای نوشتن کد است که به طور مستقل از نظمی که ما برای انجام عملیات ناهمزمان استفاده می کنیم مانند: فراخوانی پس زمینه ، اتصال جدول داده ها به منبع داده و غیره کار می کند.

به عنوان مثال ، در این طرح ، منبع داده از جدول داده ها آگاهی ندارد یا در کدام لحظه جدول داده به داده ها نیاز دارد. از آنجا که جدول داده های مشترک در اتصال () قابل مشاهده ، در نهایت داده ها را دریافت می کند ، حتی اگر:

• داده ها هنوز از پس زمینه HTTP در حال حمل و نقل هستند
• یا اگر داده ها قبلاً بارگیری شده بودند

منبع داده CDK مواد سفارشی - بررسی کامل اجرای

اکنون که ما طراحی واکنشی منبع داده را درک می کنیم ، بیایید نگاهی به اجرای کامل نهایی بیندازیم و آن را گام به گام بررسی کنیم.

توجه کنید که در این اجرای نهایی ، ما همچنین مفهوم پرچم بارگیری را در بر گرفته ایم که بعداً از آن استفاده خواهیم کرد تا یک نشانگر بارگذاری ریسندگی را به کاربر نمایش دهیم:

منبع بارگیری منبع بارگیری تجزیه

بیایید شروع به تجزیه این کد کنیم ، ابتدا با اجرای شاخص بارگیری شروع خواهیم کرد. از آنجا که این کلاس منبع داده دارای طراحی واکنشی است ، بیایید با قرار دادن یک مشاهده قابل مشاهده بولی به نام Loading $ ، پرچم بارگیری را پیاده سازی کنیم.

این قابل مشاهده به عنوان اولین مقدار کاذب منتشر می شود (که در سازنده BehaviOrsubject تعریف شده است) ، به این معنی که در ابتدا هیچ داده ای بارگیری نمی شود.

بارگیری $ $ قابل مشاهده با استفاده از AsoBservable () از موضوعی است که خصوصی در کلاس منبع داده نگه داشته می شود. ایده این است که فقط این کلاس می داند که داده ها در حال بارگیری است ، بنابراین فقط این کلاس می تواند به موضوع دسترسی پیدا کند و مقادیر جدیدی را برای پرچم بارگیری ساطع کند.

اجرای روش اتصال ()

اکنون بیایید روی اجرای روش اتصال تمرکز کنیم:

این روش نیاز به بازگرداندن داده های قابل مشاهده دارد که داده های دروس را منتشر می کند ، اما ما نمی خواهیم درس موضوع داخلی را مستقیماً در معرض دید قرار دهیم.

قرار گرفتن در معرض موضوع به معنای کنترل کنترل زمان و چه داده هایی توسط منبع داده است و ما می خواهیم از آن جلوگیری کنیم. ما می خواهیم اطمینان حاصل کنیم که فقط این کلاس می تواند مقادیر داده های دروس را منتشر کند.

بنابراین ما همچنین قصد داریم با استفاده از روش ASOBSable () ، یک قابل مشاهده را که از درسها به دست می آید ، برگردانیم. این به جدول داده (یا هر مشترک دیگر) امکان مشترک شدن در داده های قابل مشاهده را می دهد ، بدون اینکه قادر به انتشار مقادیر برای همان مشاهده باشد.

اجرای روش قطع ()

اکنون بیایید اجرای روش قطع ارتباط را تجزیه کنیم:

این روش یک بار توسط جدول داده ها در زمان تخریب مؤلفه خوانده می شود. در این روش ، ما می خواهیم هرگونه مشاهده ای را که در این کلاس ایجاد کرده ایم ، تکمیل کنیم تا از نشت حافظه جلوگیری کنیم.

ما قصد داریم هم درس را هم درس و هم بارگذاری را تکمیل کنیم ، که در این صورت قصد دارند هرگونه مشاهده مشتق شده را به اتمام برسانند.

اجرای روش Loadlessons ()

سرانجام ، اکنون بیایید به اجرای روش Loadlessons توجه کنیم:

منبع داده این روش عمومی به نام Loadlessons () را در معرض دید قرار می دهد. این روش در پاسخ به چندین اقدامات کاربر (صفحه بندی ، مرتب سازی ، فیلتر) برای بارگیری یک صفحه داده معین فراخوانی می شود.

در اینجا نحوه عملکرد این روش آورده شده است:

• اولین کاری که ما انجام خواهیم داد این است که گزارش دهیم که برخی از داده ها بارگیری می شوند ، با انتشار صادقانه به LoadingSubject ، که باعث می شود بارگذاری $ نیز منتشر شود
• سرویس درس برای دریافت یک صفحه داده از قسمت Backend استفاده می شود
• فراخوانی به findlessons () انجام می شود ، که قابل مشاهده است
• با عضویت در آن مشاهده ، ما درخواست HTTP را تحریک می کنیم
• اگر داده ها با موفقیت از پس زمینه وارد می شوند ، ما قصد داریم آن را از طریق اتصال () قابل مشاهده به جدول داده ها بازگردیم
• برای این کار ، ما با داده های درس با داده های بعدی () تماس خواهیم گرفت
• دروس مشتق شده قابل مشاهده توسط Connect () داده های درسها را به جدول داده ها منتشر می کند

رسیدگی به خطاهای پس زمینه

حال بیایید ، هنوز هم در روش Loadlessons () ، چگونگی رسیدگی به منبع داده خطاهای پس زمینه و نحوه مدیریت نشانگر بارگذاری را مشاهده می کنیم:

• اگر خطایی در درخواست HTTP رخ دهد ، قابل مشاهده توسط FindlessOns () برگشت خواهد داد
• اگر این اتفاق بیفتد ، ما می خواهیم با استفاده از Catcherror () آن خطا را بدست آوریم و قصد داریم یک مشاهده قابل مشاهده را برگردانیم که آرایه خالی را با استفاده از آن منتشر کند
• ما می توانیم مکمل نیز از یک MessageService دیگر استفاده کنیم تا یک خطای قابل بسته شدن را به کاربر نشان دهیم
• Wether تماس با پس زمینه موفق می شود یا از بین می رود ، ما در هر دو مورد با استفاده از نهایی () که در نهایت در JavaScript Try Try/Catch/بالاخره کار می کند) بارگیری $ قابل مشاهده را منتشر خواهیم کرد.

و با این بیت آخر ، ما بررسی منبع داده های سفارشی خود را به پایان رسانده ایم!

این نسخه از منبع داده از تمام موارد استفاده ما پشتیبانی می کند: صفحه بندی ، مرتب سازی و فیلتر. همانطور که می بینیم ، طراحی همه چیز در مورد ارائه شفاف داده ها به جدول داده ها با استفاده از یک API مبتنی بر مشاهده است.

حال می بینیم که چگونه می توانیم این منبع داده را بگیریم و آن را به جدول داده وصل کنیم.

پیوند یک منبع داده با جدول داده

جدول داده ها به عنوان بخشی از الگوی یک مؤلفه نمایش داده می شود. بیایید یک نسخه اولیه از آن مؤلفه بنویسیم ، که صفحه اول درس ها را نشان می دهد:

این مؤلفه حاوی چند ویژگی است:

• آرایه نمایش داده شده ترتیب بصری ستون ها را تعریف می کند
• خاصیت DataSource نمونه ای از درس هایورسورس را تعریف می کند ، و از طریق الگوی به میز MAT منتقل می شود

شکستن روش ngoninit

در روش NgonInit ، ما برای ایجاد بارگذاری صفحه اول درس ها ، از روش منبع داده Loadlessons () استفاده می کنیم. بیایید توضیح دهیم که چه اتفاقی می افتد در نتیجه آن تماس:

• منبع داده خدمات درس را فراخوانی می کند ، که باعث ایجاد درخواست HTTP برای واکشی داده ها می شود
• منبع داده سپس داده ها را از طریق درس مجلل منتشر می کند ، که باعث می شود قابل مشاهده توسط اتصال () بازگردد صفحه درس ها
• مؤلفه جدول داده میز MAT در Connect () قابل مشاهده است و صفحه درس های جدید را بازیابی می کند
• جدول داده ها سپس صفحه درس های جدید را نشان می دهد ، بدون اینکه بدانید داده ها از کجا آمده اند یا چه چیزی باعث ورود آن شده است

و با استفاده از این مؤلفه "چسب" ، اکنون یک جدول داده کاری داریم که داده های سرور را نشان می دهد!

مشکل این است که این مثال اولیه همیشه در حال بارگیری فقط صفحه اول داده ها ، با اندازه صفحه 3 و بدون معیارهای جستجو است.

بیایید از این مثال به عنوان نقطه شروع استفاده کنیم و شروع به افزودن کنیم: یک نشانگر بارگذاری ، صفحه بندی ، مرتب سازی و فیلتر.

نمایش یک نشانگر بارگذاری مواد

به منظور نمایش شاخص بارگذاری ، ما قصد داریم از بارگیری $ قابل مشاهده در منبع داده استفاده کنیم. ما از مؤلفه مواد Mat-Spinner استفاده خواهیم کرد:

همانطور که می بینیم ، ما از لوله Async و NGIF برای نشان دادن یا پنهان کردن شاخص بارگذاری مواد استفاده می کنیم. در اینجا جدول به نظر می رسد در حالی که داده ها در حال بارگیری هستند:

ما همچنین هنگام انتقال بین دو صفحه داده با استفاده از صفحه بندی ، مرتب سازی یا فیلتر از نشانگر بارگذاری استفاده خواهیم کرد.

اضافه کردن یک جدول جدول داده جدول

مؤلفه Paginator Material که ما از آن استفاده خواهیم کرد ، یک صفحه بندی عمومی است که با یک API مبتنی بر مشاهده همراه است. از این صفحه بندی می توان برای پیج هر چیزی استفاده کرد ، و به طور خاص با جدول داده ها مرتبط نیست.

به عنوان مثال ، در یک تنظیم مؤلفه Master-Detail ، ما می توانیم از این Paginator برای حرکت بین دو عنصر جزئیات استفاده کنیم.

اینگونه است که می توان از مؤلفه مات-بخشنده در یک الگوی استفاده کرد:

همانطور که می بینیم ، هیچ چیزی در الگوی پیوند دهنده Paginator با منبع داده یا جدول داده وجود ندارد - این اتصال در سطح CourseComponent انجام می شود.

Paginator فقط باید بداند که تعداد کل موارد در حال پیگیری (از طریق خاصیت طول) است ، تا بدانید که تعداد کل صفحه وجود دارد!

این بر اساس آن اطلاعات (به علاوه فهرست صفحه فعلی) است که Paginator دکمه های ناوبری را فعال یا غیرفعال می کند.

به منظور انتقال این اطلاعات به Paginator ، ما از ویژگی درسی از یک شیء دوره جدید استفاده می کنیم.

نحوه پیوند Paginator مواد به منبع داده

اکنون بیایید نگاهی به CourseComponent بیندازیم ، تا ببینیم دوره از کجا می گذرد و چگونه Paginator با منبع داده پیوند می یابد:

تجزیه روش ngoninit ()

بیایید با شیء دوره شروع کنیم: همانطور که می بینیم این شیء در زمان ساخت و ساز از طریق روتر در دسترس است.

این شیء داده در زمان ناوبری روتر با استفاده از یک حل کننده داده روتر از پس زمینه بازیابی شد (نمونه ای را در اینجا ببینید).

این یک طراحی بسیار متداول است ، که تضمین می کند که صفحه ناوبری هدف از قبل برخی از داده های از پیش آماده شده آماده برای نمایش است.

ما همچنین در این روش صفحه اول داده ها را مستقیماً بارگیری می کنیم (در خط 20).

چگونه Paginator به منبع داده پیوند می یابد؟

در کد فوق می توانیم ببینیم که پیوند بین Paginator و منبع داده در روش NGafterViewInit () انجام می شود ، بنابراین بیایید آن را تجزیه کنیم:

ما از قلاب چرخه عمر AfterViewInit استفاده می کنیم زیرا باید اطمینان حاصل کنیم که مؤلفه Paginator که از طریق ViewChild پرس و جو شده است در حال حاضر در دسترس است.

Paginator همچنین دارای یک API مبتنی بر قابل مشاهده است و صفحه قابل مشاهده را در معرض دید قرار می دهد. این قابل مشاهده هر بار که کاربر روی دکمه های ناوبری Paginator یا کشویی اندازه صفحه کلیک می کند ، مقدار جدیدی را منتشر می کند.

بنابراین به منظور بارگیری صفحات جدید در پاسخ به یک رویداد صفحه بندی ، تنها کاری که باید انجام دهیم این است که در این مورد قابل مشاهده مشترک شویم و در پاسخ به یک رویداد صفحه بندی ، ما قصد داریم با روش منبع داده بارگیری () تماس بگیریم. با فراخوانی loadlessonspage ().

در آن تماس به Loadlessons () ، ما می خواهیم به منبع داده منتقل شویم که چه صفحه ای را می خواهیم بارگیری کنیم و چه اندازه صفحه را بارگیری کنیم و آن اطلاعات به طور مستقیم از Paginator گرفته می شود.

چرا از اپراتور شیر () استفاده کرده ایم؟

ما همچنین می توانستیم از طریق یک کنترل کننده مشترک () تماس با منبع داده را انجام دهیم ، اما در این حالت ، ما آن تماس را با استفاده از نسخه قابل استفاده از اپراتور RXJS DO به نام TAP اجرا کرده ایم.

مشاهده کننده را در عمل مشاهده کنید

و با این کار ، ما اکنون یک صفحه اصلی کارگری داریم! در اینجا آنچه در صفحه نمایش در صفحه به نظر می رسد ، در حالی که صفحه 2 لیست درس ها را نشان می دهد:

بیایید حال خود را به اضافه کردن ویژگی های بیشتر به مثال خود ادامه دهیم ، بیایید یک ویژگی بسیار مورد نیاز دیگر را اضافه کنیم: هدرهای جدول قابل مرتب سازی.

اضافه کردن هدر مواد قابل مرتب سازی

برای اضافه کردن هدرهای قابل مرتب سازی به جدول داده های خود ، ما باید آن را با دستورالعمل MATSORT حاشیه نویسی کنیم. در این حالت ، ما فقط یک ستون در جدول قابل مرتب سازی ، ستون SEQNO ایجاد خواهیم کرد.

در اینجا آنچه که این الگوی با تمام دستورالعمل های مربوط به مرتب سازی چندگانه به نظر می رسد:

علاوه بر دستورالعمل MATSORT ، ما همچنین یک زن و شوهر از دستورالعمل های مربوط به نوع کمکی اضافی را به مؤلفه میز MAT اضافه می کنیم:

• MatSortactive: وقتی داده ها به جدول داده منتقل می شوند ، معمولاً از قبل مرتب شده است. این بخشنامه به ما اجازه می دهد تا جدول داده ها را آگاه سازیم که داده ها در حال حاضر توسط ستون SEQNO طبقه بندی شده اند ، بنابراین نماد مرتب سازی ستون SEQNO به عنوان یک فلش به سمت بالا نمایش داده می شود
• MATSORTDIRECTION: این یک دستورالعمل همراه به MatSortactive است ، جهت نوع اولیه را مشخص می کند. در این حالت ، داده ها در ابتدا توسط ستون SEQNO به ترتیب صعودی طبقه بندی می شوند ، بنابراین هدر ستون نماد مرتب سازی را بر این اساس تطبیق می دهد (تصویر زیر)
• MATSORTDISABLECLEAR: گاهی اوقات ، علاوه بر نظم صعودی و نزولی ، ممکن است یک سومین حالت "بدون زایمان" را برای هدر ستون قابل مرتب سازی بخواهیم ، جایی که می توانیم ترتیب مرتب سازی را پاک کنیم. در این حالت ، ما می خواهیم آن را غیرفعال کنیم تا اطمینان حاصل کنیم که ستون SEQNO همیشه حالت های صعودی یا نزولی را نشان داده است

این پیکربندی مرتب سازی برای کل جدول داده ها است ، اما ما همچنین باید دقیقاً مشخص کنیم که چه هدرهای جدول قابل مرتب سازی هستند!

در مورد ما ، فقط ستون SEQNO قابل مرتب سازی است ، بنابراین ما در حال حاشیه نویسی سلول هدر ستون با دستورالعمل MAT-Sort-Header هستیم.

و این تغییرات الگوی را در بر می گیرد ، اکنون می خواهیم به تغییراتی که ما در CourseComponent ایجاد کرده ایم تا بتوانیم مرتب سازی هدر جدول را فعال کنیم.

پیوند عنوان ستون Sortable به منبع داده

دقیقاً مانند مورد صفحه بندی ، هدر مرتب سازی قابل مشاهده است که هر زمان که کاربر روی عنوان ستون Sortable کلیک کند ، مقادیر را منتشر می کند.

دستورالعمل MATSORT سپس نوعی مشاهده را در معرض دید قرار می دهد ، که می تواند بار صفحه جدیدی را به روش زیر ایجاد کند:

همانطور که می بینیم ، نوع مشاهده قابل مشاهده اکنون با صفحه قابل مشاهده ادغام شده است! اکنون بار صفحه جدیدی در دو مورد ایجاد می شود:

• هنگامی که یک رویداد صفحه بندی رخ می دهد
• وقتی یک رویداد مرتب رخ می دهد

جهت مرتب سازی ستون SEQNO اکنون از دستورالعمل مرتب سازی (تزریق شده از طریق ViewChild ()) به پس زمینه گرفته شده است.

توجه کنید که بعد از هر نوع ما نیز با مجبور کردن صفحه اول داده های مرتب شده ، مجدداً مجدداً مجدداً تنظیم می کنیم.

هدر مرتب سازی مواد در عمل

در اینجا آنچه جدول داده ها با عنوان های قابل مرتب سازی به نظر می رسد ، پس از بارگیری داده ها و کلیک بر روی عنوان Sortable (ایجاد یک نوع نزولی توسط SEQNO):

به نماد مرتب سازی در ستون SEQNO توجه کنید

در این مرحله ، ما پیج سرور و مرتب سازی در محل داریم. ما اکنون آماده هستیم تا ویژگی اصلی نهایی را اضافه کنیم: فیلتر سمت سرور.

اضافه کردن فیلتر سمت سرور

به منظور پیاده سازی فیلتر سمت سرور ، اولین کاری که باید انجام دهیم این است که یک جعبه جستجو را به الگوی خود اضافه کنیم.

و از آنجا که این نسخه نهایی است ، بیایید سپس الگوی کامل را با تمام ویژگی های آن نمایش دهیم: صفحه بندی ، مرتب سازی و همچنین فیلتر سمت سرور:

شکستن اجرای کادر جستجو

همانطور که می بینیم ، تنها بخش جدید در این نسخه نهایی الگوی نهایی ، ورودی-ورودی-کانتینر است که حاوی کادر ورودی مواد است که در آن کاربر پرس و جو جستجو را تایپ می کند.

این جعبه ورودی از یک الگوی مشترک که در کتابخانه مواد یافت می شود ، دنبال می کند: ورودی-ورودی-کانتینر در حال بسته بندی ورودی HTML ساده و طرح ریزی آن است.

این امکان دسترسی کامل به کلیه خصوصیات ورودی استاندارد از جمله به عنوان مثال تمام خصوصیات مربوط به دسترسی را به ما می دهد. این همچنین سازگاری با اشکال زاویه ای را به ما می دهد ، زیرا می توانیم دستورالعمل های فرم را مستقیماً در عنصر HTML ورودی اعمال کنیم.

اطلاعات بیشتر در مورد نحوه ساخت یک مؤلفه مشابه در این پست را بخوانید: Angular NG-Content و Production Content: راهنمای کامل.

توجه کنید که حتی یک کنترل کننده رویداد به این جعبه ورودی هم متصل نیست! سپس بیایید نگاهی به مؤلفه بیندازیم و ببینیم که این چگونه کار می کند.

مؤلفه نهایی با صفحه بندی سرور ، مرتب سازی و فیلتر

این نسخه نهایی CourseComponent با تمام ویژگی های موجود است:

سپس بر روی تجزیه قسمت فیلتر سرور تمرکز کنیم.

دریافت مرجع به کادر ورودی جستجو

ما می توانیم ببینیم که با استفاده از ViewChild ("ورودی") یک مرجع DOM را به عنصر تزریق کرده ایم. توجه کنید که این بار در اطراف ، مکانیسم تزریق به ما اشاره ای به یک عنصر DOM و نه به یک مؤلفه داد.

با این مرجع DOM ، در اینجا بخشی است که باعث می شود جستجوی سمت سرور وقتی کاربر در یک پرس و جو جدید تایپ می کند:

کاری که ما در این کار انجام می دهیم این است: ما جعبه ورودی جستجو را می گیریم و با استفاده از FromeVent یک مشاهده می کنیم.

این مشاهده هر بار که یک رویداد جدید کلید رخ می دهد ، یک مقدار را منتشر می کند. در این مورد قابل مشاهده ، ما چند اپراتور را اعمال خواهیم کرد:

• Debouncetime (150): کاربر می تواند خیلی سریع در کادر ورودی تایپ کند و این می تواند درخواست های سرور زیادی را ایجاد کند. با استفاده از این اپراتور ، ما میزان درخواست های سرور را که حداکثر یک در هر 150 دقیقه است ، محدود می کنیم.
• متمایز (): این اپراتور مقادیر تکراری را از بین می برد

و با وجود این دو اپراتور ، اکنون می توانیم با عبور از رشته پرس و جو ، اندازه صفحه و فهرست صفحه به منبع داده از طریق اپراتور TAP () ، بار صفحه را ایجاد کنیم.

اگر کاربر اصطلاح جستجو "سلام" را تایپ کنیم ، اکنون نگاهی به آنچه صفحه نمایش به نظر می رسد نگاه می کنیم:

و با این کار ، ما مثال خود را به پایان رسانده ایم! اکنون ما یک راه حل کامل برای نحوه اجرای جدول داده های مواد زاویه ای با صفحه بندی ، مرتب سازی و فیلتر کردن سمت سرور داریم.

بیایید به سرعت خلاصه آنچه را که آموخته ایم خلاصه کنیم.

نتیجه گیری

جدول داده ها ، منبع داده و مؤلفه های مرتبط نمونه خوبی از یک طراحی واکنشی است که از یک API مبتنی بر مشاهده استفاده می کند. بیایید نکات کلیدی طراحی را برجسته کنیم:

• جدول داده های مواد انتظار دارد که داده ها را از طریق منبع داده از طریق یک مشاهده دریافت کند
• نقش اصلی منبع داده ساخت و ارائه یک مشاهده قابل مشاهده است که نسخه های جدیدی از داده های جدولی را به جدول داده ها منتشر می کند
• سپس یک کلاس جزء مانند دوره ها همه چیز را با هم "چسب" می کند

این طرح واکنشی به اطمینان از اتصال سست از عناصر متعدد درگیر کمک می کند و جدایی قوی از نگرانی ها را فراهم می کند.

کد منبع + مثال در حال اجرا GitHub

یک نمونه در حال اجرا از کد کامل در اینجا در این شعبه در GitHub موجود است ، و شامل یک سرور کوچک Backend Express است که به داده ها خدمت می کند و مرتب سازی/پیج/فیلتر کردن طرف سرور را انجام می دهد.

امیدوارم که این پست به شروع کار با جدول داده های زاویه ای کمک کند و از آن لذت ببرید!

اگر می خواهید چیزهای بیشتری در مورد مواد زاویه ای بیاموزید ، توصیه می کنیم دوره مواد زاویه ای را بررسی کنید ، جایی که انواع مختلفی از ابزارک ها را با جزئیات بیشتری پوشش می دهیم.

اگر چند سؤال یا نظر دارید ، لطفاً در نظرات زیر به من اطلاع دهید و من به شما باز می گردم.

برای اطلاع از پست های آینده در مورد مواد زاویه ای و سایر موضوعات زاویه ای ، من از شما دعوت می کنم تا در خبرنامه ما مشترک شوید:

اگر تازه شروع به یادگیری زاویه ای کرده اید ، نگاهی به Angular for Beversners نگاهی بیندازید: