কৌণিক পদার্থে ডিফল্ট বাছাই - শিরোনাম অনুসারে বাছাই করুন

Question 1

আমি কীভাবে নীচে কৌণিক উপাদান কোডটি পরিবর্তন করতে পারি, যাতে ডেটা-টেবিলটি 'নাম' কলাম অনুসারে বাছাই করা হয়, ডিফল্টরূপে ক্রমযুক্ত ক্রম order তীর (বর্তমান সাজানোর দিক নির্দেশ করে) অবশ্যই প্রদর্শিত হবে।

এটিই আমি অর্জন করতে চাই:

আসল কোড:

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

আমি এই জাতীয় কিছু চেষ্টা করছিলাম, তবে এটি কাজ করে না (কোনও তীর প্রদর্শিত হবে না, বাছাই করা হয়নি)

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>

এখানে প্লাঙ্কারের লিঙ্ক

Question 2

আপনি ভুল matSortStartকরছেন matSortDirection।

এটা চেষ্টা কর:

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc" matSortDisableClear>

https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p= পূর্বরূপ

matSortStart সাজানোর সময় ব্যবহৃত চক্রটিকে বিপরীত করতে ব্যবহার করা যেতে পারে (যেমন যখন ব্যবহারকারী বাছাই করতে ক্লিক করে, এটি এসসি এর পরিবর্তে ডেস্কে শুরু হয়)।

Question 3

আপনি sort(Sortable)ডেটা উত্সের পদ্ধতিতে অনুরোধ করে প্রোগ্রামটিমে টেবিলটিকে সাজিয়ে রাখতে পারেন । ধরে নিই dataSourceডেটা উত্সের জন্য আপনার কাছে একটি উপাদান সম্পত্তি রয়েছে:

// to put next to the class fields of the component
@ViewChild(MatSort) sort: MatSort

// to put where you want the sort to be programmatically triggered, for example inside ngOnInit
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;

Question 4

@ViewChild(MatSort) sort: MatSort;

this.dataSource.sort = this.sort;

const sortState: Sort = {active: 'name', direction: 'desc'};
this.sort.active = sortState.active;
this.sort.direction = sortState.direction;
this.sort.sortChange.emit(sortState);

কাজ করা উচিত. ডেমো

এবং বাছাইয়ের দিকের তীরটি দেখানোর জন্য, পরবর্তী সিএসএস যুক্ত করুন (সমাপ্তি)

th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

Question 5

উপাদানের জন্য আপডেট (v7.3 দিয়ে পরীক্ষিত):

@ViewChild(MatSort) matSort: MatSort;

private someMethod(): void {
  this.matSort.sort({ id: 'columnName', start: 'asc', disableClear: false });
}

mat-sort-headerএটি কোনও ত্রুটিবিহীনতার তীরটিকেও আপডেট করবে

Question 6

আপনি উপাদান সারণী এছাড়াও আপনার জন্য মাদুর-টেবিল সাজানোর বৈশিষ্ট্যগুলি আবদ্ধ করতে পারেন।

যেমন @ অ্যান্ড্রু সেগুইন বলেছেন:

<table matSort matSortActive="name" matSortDirection="asc">

এটি ডিফল্ট বাছাই করার সঠিক উপায় যদি আপনি জানেন যে কোনটি।

আপনি কোথাও কোথাও থেকে বাছাইয়ের ক্ষেত্রে (ক্যোয়ারিং স্ট্রিং প্যারামগুলি থেকে আমার ক্ষেত্রে), আপনি এটিও এটি করতে পারেন (বাছাই করা তীরগুলি এখানে পুরোপুরি কাজ করে):

sortDirection: 'name',  // this can be changed or filled in any time
sortProperty: 'asc',


<mat-table matSort [matSortActive]="sortProperty" [matSortDirection]="sortDirection">

Question 7

হতে পারে আপনি পৃষ্ঠার শুরুতে নামটি এবং দিকনির্দেশের জন্য বাছাই করা ফাংশনটি কল করার চেষ্টা করেছেন?

     ngOnInit() {
    let defSort: Sort = {};
    defSort.direction = 'asc';
    defSort.active = 'name';
    this.sortData(defSort);
  }

Question 8

আমার ক্ষেত্রে বাছাই করা কাজ করছিল না কারণ ম্যাটকালামডেফ আইডি এবং মাদুর-সেল ভেরি আলাদা

<ng-container matColumnDef="firstName">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

ম্যাটকালোমডেফ = "ফার্স্টনাম" কে ম্যাটকালোমডেফ = " নাম " এ পরিবর্তন করার পরে যা আইটেম হিসাবে একই। নাম

    <ng-container matColumnDef="name">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

এটি আমার জন্য দারুণ কাজ করছে

Question 9

আমাকে লোডের উপর ডিফল্ট বাছাই করতে হয়েছিল

const matSort = { id: defaultSort.name } as MatSortable;
this.sort.direction = defaultSort.sort === 'asc' ? '' : defaultSort.sort === 'desc' ? 'asc' : 'desc' as SortDirection;
this.sort.sort(matSort);

Question 10

@Andrew Seguin (প্রথম এবং গৃহীত উত্তর) থেকে উত্তর আমার জন্য চাক্ষুষ কৌতুক করেনি, কিন্তু এটা না সাজানোর টেবিল।

আমার সমাধানটি হ'ল @ অ্যান্ড্রু সেগুইন দ্বারা সরবরাহিত এইচটিএমএল কোডটি ব্যবহার করা এবং সারণডেটা (বাছাই করুন: বাছাই করুন) পদ্ধতিটি নিজে কল করুন তবে কীভাবে এটি করবেন? ডকুমেন্টেশনে বর্ণিত হিসাবে , ,, "সাজান" একটি ইন্টারফেস যা দুটি বৈশিষ্ট্য রয়েছে, সক্রিয় এবং দিকনির্দেশনা এবং ইন্টারফেসটি অবশ্যই এর মতো দেখতে হবে:

export interface Sort {
   active:string //The id/name of the column being sorted
   direction:string //asc or dsc depending on the use case (The sort direction)
}

সুতরাং কৌশলটি হ'ল ngOnInit এ বাছাই করা ডেটা (বাছাই করুন: বাছাই করুন) পদ্ধতিটি নিম্নরূপ:

ngOnInit(){
    //Do some nitialization
    this.sortData({active:'name', direction:'asc'});
}

sortData(sort: Sort) {
    //Your sorting algorithm (see examples in documentation, link above and at the bottom)
}

এইচটিএমএল কোডটি গৃহীত উত্তরের মতোই ;-) আশা করি এটি যে কারওকে সহায়তা করে, অ্যালেক্স

ডকুমেন্টেশন উদাহরণ

Question 11

আচরণকে প্রভাবিত করে এমন অনেকগুলি অবদানকারী কারণ রয়েছে। প্রায় এটা ব্যবহার MatTableDataSource বনাম একটি হাত crafted ব্যুৎপন্ন ডেটাউত্স । সুতরাং বিভিন্ন সমাধান কিছু ক্ষেত্রে কার্যকর হতে পারে এবং অন্যগুলিতে নাও পারে।

যাইহোক, এটি একটি পুরানো বাগ যা গিটহাবের উপর ভালভাবে কভার করা হয়েছে । কৌণিক দলের মনোযোগ আকর্ষণ করতে দয়া করে গিটহাব ইস্যুটি উত্সাহিত করুন।

গিটহাব থ্রেড ( লিঙ্ক ) এ প্রকাশিত সর্বাধিক টেকসই সমাধানটি হল বাছাইয়ের আদেশ প্রয়োগের জন্য নিম্নলিখিত পদ্ধতিটি কল করা:

public setSort(id: string, start?: 'asc' | 'desc') {
    start = start || 'asc';
    const matSort = this.dataSource.sort;
    const toState = 'active';
    const disableClear = false;

    //reset state so that start is the first sort direction that you will see
    matSort.sort({ id: null, start, disableClear });
    matSort.sort({ id, start, disableClear });

    //ugly hack
    (matSort.sortables.get(id) as MatSortHeader)._setAnimationTransitionState({ toState });
}