所以,我将我的角度2项目的组件划分为不同的文件,我在检索数据时遇到问题
这里我将附上子组件的代码部分和html部分:
编辑remove.component.ts
import { Component, Injectable, Input } from '@angular/core';
import { List } from './list';
import { Functions } from './function.service';
@Component({
selector: 'edit-remove',
templateUrl: `./edit-remove.component.html`,
styleUrls: ['./app.component.css'],
providers: [Functions],
})
@Injectable()
export class EditRemoveComponent {
@Input() lists: List[] = [];
@Input() selectedList: List;
@Input() list: List;
@Input() input: string;
constructor(private functionService: Functions) { }
status(list: List): void {
for (let i = 0; i < this.lists.length; i++) {
if (this.lists[i].id === list.id) { this.lists[i].state = !this.lists[i].state; };
}
this.functionService.listsLS();
}
edit(list: List): void {
this.selectedList = list;
this.functionService.listsLS();
}
remove(list: List): void {
for (let i = 0; i < this.lists.length; i++) {
if (this.lists[i].id === list.id) { this.lists.splice(i, 1); }
}
this.functionService.reorder();
this.functionService.counter();
this.functionService.listsLS();
}
}
编辑remove.component.html
<div [hidden]="list?.toggleShowHide">
<input type="checkbox" class="stat" (click)="status(list)" [value]="list?.state" [checked]="list?.state" />
<span>{{list?.task}}</span>
<button (click)="edit(list)">EDIT</button>
<button (click)="remove(list)">REMOVE</button>
</div>
app.component.html
<div>
<div>
<h1>To-Do Page</h1>
</div>
<div>
<input [(ngModel)]="input" placeholder="Insert a task">
<button class="list" (click)="add(list)">
ADD
</button>
</div>
<div>
<h2>Quests</h2>
<ul class="list" style="list-style-type:none">
<li *ngFor="let list of lists" [class.selected]="list === selectedList">
<edit-remove [hidden]="list?.toggleShowHide"></edit-remove>
</li>
</ul>
</div>
<lower-button></lower-button>
</div>
<list-detail [list]="selectedList"></list-detail>
如果需要,我也会提供主要代码,这可能是什么问题?