使用 Angular 2 / 4 多选元素

Question

基本上我想知道如何使用 Angular 2/4（抱歉是西班牙语）。

• 使用 *NgFor 我想选择 1 个或多个项目来启用 HTML 元素，如果没有选择任何元素，我需要禁用它才能显示 默认元素。

• 我想知道如何做类似于 Plunker 和 this 但使用卡片列表的操作（相同的效果按住 Ctrl 或 Shif 并拖动鼠标选择项目并获取数据）。

我有这样的事情

<div class="col s3">
  <button *ngIf="add" mz-button float="true"><i mz-icon [icon]="'add'"></i></button>
  <button *ngIf="!add" mz-button float="true"><i mz-icon [icon]="'remove'"></i></button>
</div>

<mz-card *ngFor="let usuario of usuarios" (click)="onSelecPersona()">
    <mz-card-content>
      <div class="row">
        <div class="col s6">
          {{usuario.nombre}}
        </div>
        <div class="col s6 right-align">
          <i *ngIf="usuario.admin" mz-icon-mdi [icon]="'star'"></i>
          <i *ngIf="!usuario.admin" mz-icon-mdi [icon]="'star-2'"></i>
        </div>
      </div>
    </mz-card-content>
  </mz-card>

我的组件是

add = true;
  usuarios = [
    { nombre: 'Alexis Wursten', admin: false  },
    { nombre: 'Janco Boscan', admin: true  },
    { nombre: 'Noemi Iturralde', admin: false  },
  ];

  onSelecPersona() {
    this.add = false;
  }

谢谢 =)

Answer 1

这是完整的示例代码：

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
    template: `
            <mz-card [class.selected]="usuario.selected" *ngFor="let usuario of usuarios" (click)="onSelecPersona(usuario)" (mouseenter)="onMouseOver($event, usuario)" (mouseleave)="onMouseOver($event, usuario)">
                <mz-card-content>
                  <div class="row">
                    <div class="col s6">
                      {{usuario.nombre}}
                    </div>
                    <div class="col s6 right-align">
                      <i *ngIf="usuario.admin" mz-icon-mdi [icon]="'star'"></i>
                      <i *ngIf="!usuario.admin" mz-icon-mdi [icon]="'star-2'"></i>
                    </div>
                  </div>
                </mz-card-content>
              </mz-card>
          `,
    styles: [`
            mz-card-content {
              user-select: none;
            }
            .selected {
              background: red;
            }
          `]
})
export class NameComponent {
    private dragStart:number = 0;
    private dragOver:number = 0;

    constructor() {}

    @HostListener('document:mousedown', ['$event'])
    onMouseDown(ev) {
        this.dragStart = ev.clientY;
    }
    @HostListener('document:mouseup', ['$event'])
    onMouseUp(ev) {
        this.dragStart = 0;
        this.dragOver = 0;
    }

    public usuarios:Array<{id?: number; nombre: string; admin: boolean;}> = [
        { nombre: 'Alexis Wursten', admin: false  },
        { nombre: 'Janco Boscan', admin: true  },
        { nombre: 'Noemi Iturralde', admin: false  },
    ];
    public added: string[] = [];

    onSelecPersona(item) {
        if(this.added.indexOf(item.nombre)===-1) { // or compare by id
            this.added = this.added.concat([item.nombre]);
        }
        else {
            this.added = this.added.filter((x) => item.nombre!==x); // or compare by id
        }
        this.usuarios = this.usuarios.map((x) => (x===item.nombre ? Object.assign({}, x, { selected: !(this.added.indexOf(item.nombre)!==-1) }) : x));
    }

    onMouseOver(ev, item) {
        if(ev.which!==1) {
            return false;
        }

        ev.preventDefault();

        if(ev.type==='mouseenter' && !item.selected) {
            this.dragOver = ev.clientY - this.dragStart > 0 ? 1:-1;
            this.onSelecPersona(item);
            return false;
        }

        if(ev.type==='mouseleave') {
            if(this.dragOver===1 && ev.clientY < ev.target.offsetTop && item.selected) {
                console.log('desel...', item);
                this.onSelecPersona(item);
                return false;
            }
            if(this.dragOver===-1 && ev.clientY > ev.target.offsetTop && item.selected) {
                console.log('desel...', item);
                this.onSelecPersona(item);
                return false;
            }
        }
    }

    ngOnInit() {
    }
}