0

我目前正在做一个学校项目，我基本上是在使用 redux 进行 CRUD 操作。我已经设法先完成这三个，但现在我正在努力删除。我完全被困住了，因此任何形式的帮助都将受到高度赞赏。

下面是我的代码，您可以在其中看到到目前为止我所做的事情。我很确定我有很多错误，这就是我寻求帮助的原因:)。

事件服务.ts

editEvent(event: Event) {
    const token = this.ngRedux.getState().users.token;
    const url = 'https://firebasedata-rf34-default-rtdb.europe-west1.firebasedatabase.app/events.json?auth=' + token;
    
    return this.http.put(url, event, this.getHttpOptions());
}

deleteEvent() {
    const token = this.ngRedux.getState().users.token;
    const url = 'https://firebasedata-rf34-default-rtdb.europe-west1.firebasedatabase.app/events.json?auth=' + token;
    
    return this.http.delete(url, this.getHttpOptions())
}

事件动作.ts

updateEvent(updatedEvent: Event) : void {
        this.eventService.editEvent(updatedEvent).subscribe((result: any) => {
            console.log("result from server");
            console.log(result);
            
            updatedEvent.id = result.name;
        })
        this.ngRedux.dispatch({
            type: EventeActions.UPDATE_EVENT,
            payload: updatedEvent
        })
    }

    deleteEvent(deletedEvent: Event) : void {
        this.eventService.deleteEvent().subscribe((result: any) => {
        })
        this.ngRedux.dispatch({
            type: EventeActions.DELETE_EVENT,
            payload: deletedEvent
        })
    }

EventReducer.ts

case EventeActions.UPDATE_EVENT:
            const newArray = [...state.events];
            const index = state.events.findIndex(event => event.id === action.payload.id);
            newArray[index] = action.payload;
            return tassign(state, {events: newArray})

        case EventeActions.DELETE_EVENT:
            return {...state, events: state.events.splice(action.payload)}

event.component.ts

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.scss']
})
export class EventComponent implements OnInit {
@Input() event: Event;
@Output() eventClicked: EventEmitter<any> = new EventEmitter<any>();
@Output() deletedClickedEvent: EventEmitter<any> = new EventEmitter<any>();

  constructor() { }

  ngOnInit(): void {
  }

  editEvent(id: string): void {
    this.eventClicked.emit(id);
  }

  deleteEvent(id: string): void {
    this.deletedClickedEvent.emit(id); 
  }

}

event.component.html

<button mat-button color="primary" (click)="editEvent(event.id)">
    <mat-icon>edit</mat-icon>
</button>
<button mat-button color="warn" (click)="deleteEvent(event.id)">
    <mat-icon>delete</mat-icon>
</button>

events.component.ts

import { NgRedux } from '@angular-redux/store';
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { Event } from '../entities/Event';
import { EventeActions } from '../store/actions/EventAcitons';
import { AppState } from '../store/Store';


@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.scss']
})
export class EventsComponent implements OnInit{
  public events: Event[];

  displayedColums = ['event', 'date', 'location', 'status', 'actions'];
  dataSource = new MatTableDataSource<Event>();

  constructor(
    private router: Router,
    private ngRedux: NgRedux<AppState>,
    private eventActions: EventeActions
    ) { }

  ngOnInit(): void {
    this.eventActions.readEvent();

    this.ngRedux.select(state => state.events).subscribe(res => {
      this.events = res.events;
    })
    this.dataSource.data = this.events; 
  }

  editEvent(id: any) {
    this.router.navigate(['neweditevent', {myId: id}])
  }
}

events.component.html

<h1 class="title">Planned Events</h1>
<div class="flexHeader">
  <button mat-raised-button color="primary" routerLink="/neweditevent" id="newEditBtn">New Event</button>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
    <ng-container matColumnDef="event">
      <th mat-header-cell *matHeaderCellDef> Event </th>
      <td mat-cell *matCellDef="let element"> {{element.event}} </td>
    </ng-container>
  
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> Date </th>
      <td mat-cell *matCellDef="let element"> {{element.createdDate | date}} </td>
    </ng-container>
  
    <ng-container matColumnDef="location">
      <th mat-header-cell *matHeaderCellDef> Location </th>
      <td mat-cell *matCellDef="let element"> {{element.location}} </td>
    </ng-container>
  
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="let element"> {{element.status}} </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell  *matHeaderCellDef > </th>
      <td mat-cell *matCellDef="let row" >
        <app-event [event]="row" (eventClicked)="editEvent($event)" (deletedClickedEvent)="deleteEvent($event)"></app-event>
      </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColums"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColums;"></tr>
  </table>

抱歉，我不得不发布几乎所有文件，因为我提到我是初学者，我仍在尝试了解 Angular 和 Redux 的工作原理:)。先感谢您。

4

0 回答 0