带有星形复选框的 Angular 收藏夹行，用于将项目添加到不同的表

问题描述

我有一个 Angular4 项目和一个包含项目的表。 项目将有不同的列，如 ID、名称、成本、...

现在我想在 Star Form 中添加一个带有复选框的行，以便在收藏夹列表中添加项目。我该如何在 Angular4（不是 Angular Material 或 AngularJS）中做到这一点？

两个表都应该显示在同一个组件“项目”中 如果单击星形图标，[x] 将是一个星形并且其填充为黄色。 然后该项目将被放入收藏夹。

Project Table:
|Favourite|ID|Name|Costs|...|
| [X]     |1 |A   |500  |...|
| [ ]     |2 |B   |600  |...|
| [X]     |3 |C   |750  |...|
| [ ]     |4 |D   |200  |...|

Favourite Table:
|ID|Name|Costs|...|
|1 |A   |500  |...|
|3 |C   |750  |...|

==UPDATE==

HTML-table row with checkBoxes:
<tr *ngFor="let project of projects">
   <td>
       <input type="checkBox" [value]="project" (click)="favourite($event)"/> 
   </td>
</tr>

HTML-Favourite Table
<tbody>
   <tr *ngFor="let f of favouriteProjects">
       <td>
           <span>
                {{f.id}}
           </span>
       </td>
       <td>
           <span>
                {{f.title}}
           </span>
       </td>
   </tr>
</tbody>

TS:
...
    private projects: Project[] = [];
    private favouriteProjects: Project[] = [];
...
favourite(ev){
        this.favouriteProjects.push(ev.target.defaultValue);
    }

解决方法

您需要为每个添加到收藏夹数组中的项目进行 API 调用，或者一次发送所有数组。我已经创建了代码样板，你可以参考这个并实现解决方案。 Here 是 stackblitz 链接。

app.component.ts

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

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  projects = [];
  favProjects = [];
  constructor(){
    // get this data from API
    // After getting the data from API make fav property false if it is not in the API response

    // Ideally if you are mainting it on backend level it should be the in the object.
    this.projects = [
      {name: 'Abhinav',age: 15,fav:false,id:1},// id for unique identifier
      {name: 'Ravi',age: 23,id:2},{name: 'Kalam',age: 35,id:3},{name: 'Sunny',age: 25,id:4},];
    
    // check if from API is any favriout project is there add it to the favriout table
    this.initFavProject();
  }
  // load the fav project if user saved it earlier in the db
  initFavProject(){
    for(let i = 0 ; i < this.projects.length; i++){
      if(this.projects[i].fav){
        this.favProjects.push(Object.assign({},this.projects[i]));
      }
    }
  }

  addItemToFav(e){
    this.projects = this.projects.filter((item)=> item.id !== e.id);
    e.fav = true;
    // make an API all and send the upadte for row 'e',so next time user 
    // reload the webpage,its fav property will be true and it will automatically go to the favriout table.

    // Either save each time one object or all the favProjects array at once based on the click
    this.favProjects.push(Object.assign({},e));
  }

  saveFavTODB(){
    // access the this.favProjects and send it to the database to save a new one or update the exhisting one.
  }
}

app.component.html

<h3>Project Table</h3>

<app-table [tableData]="projects" [allowFavrout]="true" (favEvent)="addItemToFav($event)"></app-table>

<h3>Favrout Project</h3>
<app-table [tableData]="favProjects"></app-table>

table.component.html

<table border="1" *ngIf="tableData && tableData.length > 0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th *ngIf="allowFavrout">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td *ngIf="allowFavrout"><button (click)="addToFav(item)">Add To Favriout</button></td>
    </tr>
  </tbody>
</table>

table.component.ts

import { Component,EventEmitter,Input,OnInit,Output } from '@angular/core';

@Component({
  selector: 'app-table',templateUrl: './table.component.html',styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  @Input() tableData : Array<any> = [];
  @Input() allowFavrout = false;
  @Output() favEvent: EventEmitter<any> = new EventEmitter(false);
  constructor() { }

  ngOnInit() {
  }
  addToFav(item){
    this.favEvent.emit(item)
  }
}