typescript 如何在Angular中点击按钮时显示过滤后的对象数组？

我一直在尝试开发一个todo列表项目。我的项目中有两个组件itemList和item。item List组件获取todolist的输入值并将其显示在item组件中。

项目列表组件包含一个对象数组，带有一个复选框。我一直在尝试做的是，根据复选框为该列表设置一个按钮过滤器。因此，当单击按钮（显示选中）时，列表应该只显示复选框中选中的项目。
我在此附上了stackblitz代码：code available here
下面是我尝试的代码：

项目-组件.html

<div class="listContainer">
<div
  class="checkContainer"
  [style.backgroundColor]="IsChecked ? 'grey' : '#ff6165'"
>
  <div>
    <mat-checkbox
      color="secondary"
      [(ngModel)]="IsChecked"
      (change)="onChange($event, value.task)"
    ></mat-checkbox>
  </div>
</div>

<div class="displayTask">
  <div class="displayvalue" [ngClass]="{ 'line-through': value.task }">
    {{ value.task | uppercase }}
  </div>
</div>

<div class="menuDrop">
  <Matbutton mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>more_vert</mat-icon>
  </Matbutton>
  <mat-menu #menu="matMenu">
    <button mat-menu-item (click)="removeTask($event)">
      <mat-icon class="deleteitem">delete</mat-icon>
      <span>remove</span>
    </button>
  </mat-menu>
 </div>
</div> 
</div>

物料.组件.ts

export class ItemComponent implements OnInit {
  @Input()
  value: any;
  IsChecked: boolean;
  @Output()
  checkTask = new EventEmitter<any>();

  constructor() {
   this.IsChecked = false;
  }

  ngOnInit(): void {}

  onChange($event: any, name: any) {
   if ($event.checked) {
    this.checkTask.emit(this.value);
   } 
   else {
    this.removeCheck.emit(this.value)
    console.log('the task is removed');
   }
   }
  }

项目列表.组件.html

<div>
  <mat-form-field appearance="outline">
<input
  matInput
  placeholder="Add a Task"
  (keyup.enter)="addTask()"
  autocomplete="off"
  [formControl]="nameControl"
 />
 </mat-form-field>
<button (click)="displaylist()">Display Checked</button>
</div>

<ng-container *ngIf="filteredData$ | async as data">
<div
  cdkDropList
  class="example-list"
  (cdkDropListDropped)="drop($event, data)"
 >
<app-item
  [value]="value"
  *ngFor="let value of data; index as index"
  (inputDataChange)="removeTask(data, index)"
  (checkTask)="addCheckedTask($event, data)"
  (removeCheck)="removeCheckedTask($event,data)"

  cdkDrag
 >
</app-item>
</div>
</ng-container>

项目列表.组件.ts

public arrayChecked: TaskType[] = [];

 addCheckedTask($event: any, data: any): void {
    this.arrayChecked.push($event);
    console.log('the task is added', this.arrayChecked);
 }

 displaylist(){
    const selectList$ = this.arrayChecked.map((checked, index) => checked ? 
    this.arrayChecked[index] : null).filter(value => value !== null);
    console.log("DisplayChecked",selectList$);
 }

 removeCheckedTask($event:any, data:any){
    const index = this.arrayChecked.findIndex(list => list.task);
    this.arrayChecked.splice(index, 1);
    console.log(this.arrayChecked);
 }

在上面的代码中，item-list组件有一个按钮“Displaychecked”。我在这里尝试创建一个对象数组，这些对象使用函数进行了检查。日志显示，数组只保存已检查的项，但是我不知道如何只显示组件中选中的项。我还附加了上面的stackblitz链接。有没有人能教我如何在点击按钮时只显示列表中选中的项目。提前感谢！

由于您的列表是由模板中的filteredData$驱动的，因此您需要使用selectList$更新它，selectList$包含所有选中的项。
item-list.component.ts:

displaylist(){
     const selectList$ = this.arrayChecked.map((checked, index) => checked ? this.arrayChecked[index] : null)
    .filter(value => value !== null);
    console.log("DisplayChecked",selectList$);

    // add this code
    if (selectList$) {
      this.filteredData$ = new Observable((subscriber) => {
        subscriber.next(selectList$ as TaskType[])
      });
    }
}

Stackblitz Demo
我还在演示的To Do部分添加了一个"Reset"按钮，这样您就可以测试撤消"Display Checked"的情况。为此，我创建了一个可重用的函数initlist()，在ngOnInit()中调用它，并将其附加到"Reset"按钮的click事件。
item-list.component.ts:

export class ItemListComponent implements OnInit {

  ...
  ...
  ...

  ngOnInit(): void {
    this.initlist();
  }

  ...
  ...

  initlist() {
    if (this.initialData$) {
      this.filteredData$ = combineLatest([
        this._homeService.searchData$,
        this.initialData$,
      ]).pipe(
        map(([searchValue, dailyList]) =>
          this._filterData(searchValue, dailyList)
        )
      );
    }
  }
}

typescript 如何在Angular中点击按钮时显示过滤后的对象数组？

1条答案

相关问题

热门标签

最新问答