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

Question

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

现在我想在星形表单中添加一个带有复选框的行，用于在收藏夹列表中添加项目。我怎样才能像这样在 Angular4（不是 Angular Material 或 AngularJS）中做到这一点？

两个 table 应该显示在同一个组件“项目”中如果 star-icon 被点击，[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);
    }

Answer 1

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

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, fav:false, id:2},
      {name: 'Kalam', age: 35, fav:false, id:3},
      {name: 'Sunny', age: 25, fav:false, 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)
  }
}

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

Angular Favourite Row with checkboxes in star form for adding projects to a different table

favorites

row

list

angular