Angular 按角度对无线电变化的记录进行排序

我正在尝试在无线电选择发生变化时对数据进行排序。当存储的无线电值更改时，我尝试调用表ngOnChanges

下面是我的收音机部件，它跟踪

型号。按
型号值排序

radio.component.html

<div class="radioButtons">
    <div class="left">
        <input type="radio" value="name" ngModel="{{model.sortBy}}" (change)="changeSortBy('name')">Sort by name
    </div>
    <div class="right">
        <input type="radio" value="age" ngModel="{{model.sortBy}}" (change)="changeSortBy('age')">Sort by age
    </div>
</div>

<div class="table-div">
    <table class="table table-striped table-bordered table-hover full-width">
        <tr>
            <th class="course-name">Person Name</th>
            <th class="duration">Date of Birth</th>
        </tr>
        <tr *ngFor="let b of birthdays">
            <td  style="height:50px;" class="course-name">{{b.name}}</td>
            <td  style="height:50px;" class="duration">{{b.birth}}</td>
        </tr>
    </table>
</div>

<app-radio (event)="emitEvent($event)"></app-radio>
<app-table [sortTableSubject]="sortTableSubject.asObservable()"></app-table>

下表是数据将以排序形式显示的组件

table.component.html

<div class="radioButtons">
    <div class="left">
        <input type="radio" value="name" ngModel="{{model.sortBy}}" (change)="changeSortBy('name')">Sort by name
    </div>
    <div class="right">
        <input type="radio" value="age" ngModel="{{model.sortBy}}" (change)="changeSortBy('age')">Sort by age
    </div>
</div>

<div class="table-div">
    <table class="table table-striped table-bordered table-hover full-width">
        <tr>
            <th class="course-name">Person Name</th>
            <th class="duration">Date of Birth</th>
        </tr>
        <tr *ngFor="let b of birthdays">
            <td  style="height:50px;" class="course-name">{{b.name}}</td>
            <td  style="height:50px;" class="duration">{{b.birth}}</td>
        </tr>
    </table>
</div>

<app-radio (event)="emitEvent($event)"></app-radio>
<app-table [sortTableSubject]="sortTableSubject.asObservable()"></app-table>

两天以来我一直在想办法，但仍然找不到合适的解决方案

提前谢谢
 您可以使用
ngx订单管道
对所有记录进行排序

见本例：

安装完ngx订购管道后，请这样使用：
*ngFor=“让b过生日”订购人：“姓名”
感谢您分享stackblitz。只有在组件发生更改时才会触发使用
ngOnchanges
。所以我在stackblitz中注意到两件事

收音机
和
表
部件相互独立
app
组件是这两个组件之间的中介
因此，radio component中的更改不会触发table组件，因此ngOnchanges也不会触发

因此，表格组件应该知道您对无线电组件进行了一些修改。在这里，您可以使用
EventEmitter
和
Subject

从无线电组件到应用程序组件的EmitEvent（事件发射器）
发出事件后，使用
主题
向表组件发送一个可观察的对象以对其进行排序
这是正确的方法之一

app.component.html

<div class="radioButtons">
    <div class="left">
        <input type="radio" value="name" ngModel="{{model.sortBy}}" (change)="changeSortBy('name')">Sort by name
    </div>
    <div class="right">
        <input type="radio" value="age" ngModel="{{model.sortBy}}" (change)="changeSortBy('age')">Sort by age
    </div>
</div>

<div class="table-div">
    <table class="table table-striped table-bordered table-hover full-width">
        <tr>
            <th class="course-name">Person Name</th>
            <th class="duration">Date of Birth</th>
        </tr>
        <tr *ngFor="let b of birthdays">
            <td  style="height:50px;" class="course-name">{{b.name}}</td>
            <td  style="height:50px;" class="duration">{{b.birth}}</td>
        </tr>
    </table>
</div>

<app-radio (event)="emitEvent($event)"></app-radio>
<app-table [sortTableSubject]="sortTableSubject.asObservable()"></app-table>

表.component.ts

import { Component, OnInit, OnChanges } from '@angular/core';
import { TableComponent } from '../table/table.component';

@Component({
  selector: 'app-radio',
  providers: [RadioComponent],
  templateUrl: './radio.component.html',
  styleUrls: ['./radio.component.css']
})
export class RadioComponent {
  model;
  constructor() {
    this.model = {
      sortBy: "name"
    }
  }

  changeSortBy(val: string, table: TableComponent) {
    this.model = {
      sortBy: val
    }
    //table.ngOnChanges();
  }

  returnModelState() {
    //retur model.sortBy value
    return this.model.sortBy;
  }
}

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { RadioComponent } from '../radio/radio.component';

@Component({
  selector: 'app-table',
  providers: [RadioComponent],
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnChanges {
  birthdays = [
    {
      name: "User Sinha",
      birth: "12/30/2011"
    }, {
      name: "Tom Cruize",
      birth: "09/25/1992"
    }, {
      name: "Peter Jones",
      birth: "01/24/1992"
    }, {
      name: "Ammy Trigger",
      birth: "12/12/2001"
    }
  ];
  // this takes input from the radio component
  sortBy: string;
  constructor(private radio: RadioComponent) {
    this.sortBy = radio.returnModelState();
  }

  ngOnChanges(changes: SimpleChanges) {
    alert("ngOnChanges: " + this.sortBy);
    this.sortItems();
  }

  sortItems() { }
}

export class AppComponent {
  sortTableSubject: Subject<string> = new Subject<string>();
  emitEvent($event){
    console.log($event);
    this.sortTableSubject.next($event);
  }
}

changeSortBy(val: string, table: TableComponent) {
    this.model = {
      sortBy: val
    }
    this.event.emit("sortByName"); //emit what type of sorting should be done and capture that in parent component
    //table.ngOnChanges();
  }

ngOnInit() {
    this.sortTableSubject.subscribe(res => {
      console.log(res);
      alert("ngOnChanges: " + this.sortBy); // Capturing the event using subject
      // Do your sorting logc here
      //this.arrangeItems();
    });
  }

Stackblitz=>
你能为这个做一个Stackblitz吗？它可能不包含相同的组件，它只能包含一个组件，这是您的问题。@ng suhas:谢谢您的快速回答。但是，我必须遵循表组件中定义的函数。因此，我们需要使用自定义函数对数组进行排序和计算年龄。主要问题是当收音机组件的收音机值发生更改时，应调用
ngOnChanges
？？我在问题中添加了stackblitz回购。我在本地项目中尝试过，但
this.event.emit（“sortByName”）未触发。可能的原因是什么？此外，在这种情况下，我们不能使用
ngOnInit
，而不能使用
ngOnChanges
，对吗？@webdev您提到过stackblitz吗？不，不需要改变@webdev很乐意帮忙！：）