列表未按角度更新

Question

我是angular的新手，我有一个基本级别的问题，当我将新对象添加到数组中时，列表没有更新。

当我点击此按钮时，我有一个按钮，我正在向数组列表添加新对象，但列表没有更新，而且我按日期按数组列表分组，这是问题吗，可以帮忙一下吗请给我。

.ts：

export class HomePage {

  events: any;

ionViewDidLoad() {

    this.events = [
      {
        "id": 1,
        "date": "2017-12-26",
        "title": "First event"
      },
      {
        "id": 2,
        "date": "2017-12-30",
        "title": "Second event"
      },
      {
        "id": 3,
        "date": "2017-12-26",
        "title": "Third event"
      },
      {
        "id": 4,
        "date": "2017-12-31",
        "title": "Last event"
      }
    ];

  }

  add(){

     this.events.push({
      "id": 5,
      "date": "2017-12-26",
       "title": "Test event"
     });
  }
}

.html：

 <ion-content padding>

        <div *ngIf="!events || events.length === 0">
            <p>No messages</p>
        </div>

      <div *ngIf="events && events?.length > 0 ">
        <ion-item-group *ngFor="let group of events | groupByCategory: 'date'">
          <ion-item-divider color="light">
            {{ group.key }}
          </ion-item-divider>
          <ion-item *ngFor="let event of group.list">{{ event.title }}</ion-item>
        </ion-item-group>
      </div>

      <div class="bottomright" (click)="add()">Add</div>

    </ion-content>

自定义管道：

@Pipe({ name: 'groupByCategory' })
export class GroupbycategoryProvider implements PipeTransform {

  transform(value: any, groupByKey: string) {

    const events: any[] = [];
    const groupedElements: any = {};

    value.forEach((obj: any) => {
      if (!(obj[groupByKey] in groupedElements)) {
        groupedElements[obj[groupByKey]] = [];
      }
      groupedElements[obj[groupByKey]].push(obj);
    });

    for (let prop in groupedElements) {
      if (groupedElements.hasOwnProperty(prop)) {
        events.push({
          key: prop,
          list: groupedElements[prop]
        });
      }
    }
    return events;
  }
}

Answer 1

我目前无法理解问题，但可以尝试以下方法：

 add(){

     this.events.push({
      "id": 5,
      "date": "2017-12-26",
       "title": "Test event"
     });
     this.cr.detectChanges();
  }

此外，将其添加到您的构造函数中，如：

constructor(private cr: ChangeDetectorRef ){}

然后将其导入。

Answer 2

将值传递给子组件并生成仅在init上发生。因此，要强制检查和检测更改，请使用 ChangeDetector

SELECT emp_name AS New__Name FROM emp;