角度2项目没有显示数据

时间:2017-11-28 15:10:36

标签: angular local-storage angular2-components

所以,我将我的角度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>

如果需要,我也会提供主要代码,这可能是什么问题?

0 个答案:

没有答案