代码之家 › 专栏 › 技术社区 › jdstein1

需要使用主/细节范例在列表之间切换项目(角度)

master-detail typescript angular

jdstein1 · 技术社区 · 7 年前

我想根据布尔属性在两个列表之间切换项目。我很难理解如何让列表组件重新渲染和显示更新的列表。

当按下“Change Shift”按钮时,“Nightunal”属性将切换,类别将更改。缺少的行为是,我还希望项目(即蝙蝠侠)从夜间列表移动到白天列表

<div>
  <my-list [list]="listSource"></my-list>
  <my-detail [selected]="selectedItem"></my-detail>
</div>

<div class="column list">
  <h2>List</h2>
  <h3>Day Shift</h3>
  <ul>
    <li *ngFor="let item of listDay" class="{{ item.nocturnal ? 'night':'day'}}">{{ item.name }}</li>
  </ul>
  <h3>Night Shift</h3>
  <ul>
    <li *ngFor="let item of listNight" class="{{ item.nocturnal ? 'night':'day'}}">{{ item.name }}</li>
  </ul>
</div>

listDay 和 listNight

ngOnInit() {
  this.listNight = this.list.filter(item => item.nocturnal);
  this.listDay = this.list.filter(item => !item.nocturnal);
}

详图构件模板:

<div class="column detail">
  <h2>Detail</h2>
  <ul>
    <li>name: {{selected.name}}</li>
    <li>job: {{selected.job}}</li>
    <li>shift: {{selected.nocturnal ? 'Night':'Day'}}</li>
    <li><button (click)="toggleShift()">Change Shift</button></li>
  </ul>
</div>

下面是一个基本的例子来说明这个问题: http://plnkr.co/edit/yJLtROrmfKjEYqj5yJ1N?p=preview

2 回复 | 直到 7 年前

amal 7 年前

不确定Fusinhussin现有的答案是否给出了您所描述的问题。当按下切换按钮时,我能够成功地将“蝙蝠侠”从昼夜列表中来回切换。以下是我修改的更新的plunker文件。

应用程序。输电系统

// root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import {List} from './list.component'
import {Detail} from './detail.component'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-list [list]="listSource"></my-list>
      <my-detail [selected]="selectedItem" (shiftChange)="shiftChanged($event)"></my-detail>
    </div>
  `,
})
export class App {
  name:string;
  listSource:any
  selectedItem:any;
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.listSource = [{
      'name':'Batman',
      'job':'Detective',
      'nocturnal':true
    },{
      'name':'Superman',
      'job':'Carpenter',
      'nocturnal':false
    },{
      'name':'Aquaman',
      'job':'Plumber',
      'nocturnal':false
    },{
      'name':'Herman',
      'job':'Physicist',
      'nocturnal':true
    }];
    this.selectedItem = this.listSource[0];
  }
shiftChanged(listItem: any) {
  let index = null;
  for (let i=0; i<this.listSource.length; i++) {
    if (listItem.name === this.listSource[i].name) {
      index = i;
      break;
    }
  }
  if (index !== null) {
    this.listSource[index].nocturnal = listItem.nocturnal;
    this.listSource = JSON.parse(JSON.stringify(this.listSource));
  }
}
}
// root module
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, List, Detail ],
  providers:[  ],
  bootstrap: [ App ]
})
export class AppModule {}

细节组成部分输电系统

// detail component
import {Component, Input, Output, EventEmitter} from '@angular/core'

@Component({
  selector: 'my-detail',
  template: `
    <div class="column detail">
      <h2>Detail</h2>
      <ul>
        <li>name: {{selected.name}}</li>
        <li>job: {{selected.job}}</li>
        <li>shift: {{selected.nocturnal ? 'Night':'Day'}}</li>
        <li><button (click)="toggleShift()">Change Shift</button></li>
      </ul>
    </div>
  `,
})
export class Detail {
  @Input() selected: any;
  @Output() shiftChange = new EventEmitter<any>();
  toggleShift() {
    this.selected.nocturnal = !this.selected.nocturnal;
    this.shiftChange.emit(this.selected);
  }
}

// list component
import {Component, Input, OnInit, OnChanges, SimpleChange} from '@angular/core'

@Component({
  selector: 'my-list',
  template: `
    <div class="column list">
      <h2>List</h2>
      <h3>Day Shift</h3>
      <ul>
        <li *ngFor="let item of listDay" class="{{ item.nocturnal ? 'night':'day'}}">{{ item.name }}</li>
      </ul>
      <h3>Night Shift</h3>
      <ul>
        <li *ngFor="let item of listNight" class="{{ item.nocturnal ? 'night':'day'}}">{{ item.name }}</li>
      </ul>
    </div>
  `,
})

export class List implements OnInt, OnChanges{
  @Input() list: any;
  listNight:any;
  listDay:any;
  ngOnInit() {
    this.listNight = this.list.filter(item => item.nocturnal);
    this.listDay = this.list.filter(item => !item.nocturnal);
  }

  ngOnChanges(change: SimpleChange) {
    for (let prop in change) {
      if (prop === 'list') {
        let list = change[prop];
         this.listNight = list.currentValue.filter(item => item.nocturnal);
         this.listDay = list.currentValue.filter(item => !item.nocturnal);
      }
    }
  }
}

您可以进一步修改文件以进行优化。但这将给你一个领先的开始,因为我只是专注于让你的plunker的功能工作。(在普朗克当地确认了这一点)。希望有帮助。

FussinHussin 7 年前

好吧,你的扑克牌有点乱,所以我从头开始。我没有对一个父对象执行两个子组件,而是对一个父对象执行一个子组件。但这种方法仍然可以通过几个更改来实现。

您的方法不起作用的原因是Angular的更改检测不起作用,因为列表发生了变异。我就是这样绕过它的,每次做一个改变,我就用这个价差( ...

这是一个 stackBlitz

如果您想了解有关智能/哑主/细节模式的更多信息,可以查看 here