Question

组件获取（通过@Input（））2个数组：＆＃34;用户＆＃34;

[{Id: 1, Name: 'One'}, {Id: 2, Name: 'Two'}, {Id: 3, Name: 'Three'}]

和＆＃34; selectedUsers＆＃34;：

[{Id: 2, Name: 'Two'}]

并输出页面上的项目：一二三

＆＃34;两个＆＃34; - 突出显示，因为它包含在数组＆＃34; selectedUsers＆＃34;中。如何从＆＃34;用户＆＃34;添加项目数组到＆＃34; selectedUsers＆＃34;反之亦然，点击（并突出显示点击的项目）？

父组件：

users = [
    {Id: 1, Name: 'One'}, 
    {Id: 2, Name: 'Two'}, 
    {Id: 3, Name: 'Three'}
];

usersSelected = [
    {Id: 2, Name: 'Two'}
];

HTML：

<app-item (*ngFor="let u of users", [user]="u")></app-item>

子组件：

@Input() user;
isActive: boolean = false;
toggleClass(){
    this.isActive = !this.isActive;
}

HTML

<p [class.active]="isActive" (click)="toggleClass()">{{user.Name}}</p>

这是另一次尝试，但应该使用@ Input / @输出： https://plnkr.co/edit/cjaij4aQuvN4Tk4ZE0ez?p=preview

Answer 1

为什么需要2个阵列？只需使用类型为selected的名为boolean的属性（true / false）扩展用户类型。这比在两个阵列之间复制/删除用户更清晰/更容易。

users = [
    {Id: 1, Name: 'One', IsSelected: false}, 
    {Id: 2, Name: 'Two', IsSelected: true}, 
    {Id: 3, Name: 'Three', IsSelected: false}
];

这允许用于渲染数组中用户的任何组件直接更新IsSelected属性。

@Input() user;
get isActive(): boolean {return this.user.IsSelected;}

toggleClass(){
    this.user.IsSelected = !this.user.IsSelected;
}

我也不相信你的html中有效的模板语法。

Answer 2

如果您想使用两个数组以及父子组件：

https://plnkr.co/edit/uEKeMRMpLnoR49clxCfo?p=preview

@Component({
  selector: 'my-parent',
  template: `
    <my-child [users]="users" [selected]="selected" ></my-child>
  `,
})
export class ParentComponent {
  public users = ['one', 'two', 'three'  ];
  public selected = [];
}

@Component({
  selector: 'my-child',
  template: `
    <div *ngFor="let user of users">
      <p [ngClass]="{ selected: isSelected(user) }" (click)="clickOnUser(user)">{{user}}</p>
    </div>
  `,
  styles: [`
    .selected {
      color: red;
    }
  `]
})
export class ChildComponent {

  @Input()
  public users: string[];

  @Input()
  public selected: string[];

  public isSelected(user) {
    return this.selected.indexOf(user) !== -1;
  }

  public clickOnUser(user) {
    if (this.selected.indexOf(user) !== -1) {
      this.selected.splice(this.selected.indexOf(user), 1);
    } else {
      this.selected.push(user);
    }
  }

}

如何使用输入/输出Angular绑定两个数组？

2 个答案: