javascript - 我们可以对数组和数组的单个数据进行数据注入(inject)吗

Question

我实际上正在尝试将数组和数组内的数据注入(inject)到另一个组件中，但不断出现错误。

我的list.component.ts

在这里，我从 app.component 注入(inject)了 itemList 数组，并且该组件工作正常。这里没有错误。

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {List} from './list.model'
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
@Input() itemList: List[] = [];
@Output() onItemSelected: EventEmitter<List>;
private currentItem: List;

constructor(){
  this.onItemSelected = new EventEmitter();
}

onClick(list: List): void {
this.currentItem = list;
this.onItemSelected.emit(list);
console.log(`clicking list title: ${list.title}`);
}

isSelected(list: List): boolean {
 if (!list || !this.currentItem) {
      return false;
    }
    return list.title === this.currentItem.title;
}
  ngOnInit() {
  }

}

list.component.html

在这里，我尝试注入(inject)两个数组，然后使用 ngFor 我也尝试注入(inject)单个列表。

<div class="ui grid posts">
    <app-list-row 
        [lists]="itemList"
        *ngFor="let list of itemList"
        [list]="list"  
        (click)='onClick(list)'
        [class.selected]="isSelected(list)">
    </app-list-row>
</div>

列表行.component.ts

我主要是想在这个组件中输入数组，以便我可以使用 splice 方法来删​​除我的列表。我尝试了 delete list; 方法，但这表明我不能在严格模式下使用删除。因此我尝试输入数组并使用拼接方法。

import { Component, OnInit, Input} from '@angular/core';
import {List} from '.././list/list.model';
@Component({
  selector: 'app-list-row',
  inputs: ['list: List'],
  templateUrl: './list-row.component.html',
  styleUrls: ['./list-row.component.css'],
  host: {'class': 'row'},
})
export class ListRowComponent implements OnInit {
list: List;
@Input() lists: List[];

deletelist(list: List): void {
    let index: number = this.lists.indexOf(list);
    if (index !== -1) {
        this.lists.splice(index, 1);
    }
} 
  ngOnInit() {
  }

}

list-row.component.html

在此编写一个 div 并使用删除图标标签，并使用 “deleteList(list)”提供单击事件。

<div class="Eight wide column left aligned title">
    <div class="value">
        <div class = "hello">
            <b>
            {{ list.title | uppercase }}
            </b>
            <div style="float: right;" class="ui label">
                <i  class="delete icon" 
                (click)="deleteList(list)"
                ></i>
            </div>
        </div>
    </div>  
</div>

这些是我的代码，我不知道我是否可以对数组及其在数组中的单个数据进行依赖注入(inject)。如果可以的话，有什么方法可以实现。在服务器中运行时控制台错误为

Unhandled Promise rejection: Template parse errors:
Can't bind to 'list' since it isn't a known property of 'app-list-row'.
1. If 'app-list-row' is an Angular component and it has 'list' input, then verify that it is part of this module.
2. If 'app-list-row' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
        [lists]="itemList"
        *ngFor="let list of itemList"
        [ERROR ->][list]="list"  
        (click)='onClick(list)'
        [class.selected]="isSelected(list)">
"): ListComponent@4:2 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:
Can't bind to 'list' since it isn't a known property of 'app-list-row'…, _nativeError: ZoneAwareError, __zone_symbol__currentTask: ZoneTask, __zone_symbol__stack: "Error: Template parse errors:↵Can't bind to 'list'…ttp://localhost:4200/polyfills.bundle.js:6060:47)", __zone_symbol__message: "Template parse errors:↵Can't bind to 'list' since …lected]="isSelected(list)">↵"): ListComponent@4:2"} Error: Template parse errors:
Can't bind to 'list' since it isn't a known property of 'app-list-row'.
1. If 'app-list-row' is an Angular component and it has 'list' input, then verify that it is part of this module.
2. If 'app-list-row' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
        [lists]="itemList"
        *ngFor="let list of itemList"
        [ERROR ->][list]="list"  
        (click)='onClick(list)'
        [class.selected]="isSelected(list)"> 

谢谢。

Answer 1

将@Input()添加到ListRowComponent类中的列表变量并检查它是否正常工作并从元数据中删除输入。

import { Component, OnInit, Input} from '@angular/core';
import {List} from '.././list/list.model';
@Component({
  selector: 'app-list-row',
  templateUrl: './list-row.component.html',
  styleUrls: ['./list-row.component.css'],
  host: {'class': 'row'},
})
export class ListRowComponent implements OnInit {
   @Input() list: List;
   @Input() lists: List[];

   deletelist(list: List): void {
       let index: number = this.lists.indexOf(list);
       if (index !== -1) {
           this.lists.splice(index, 1);
       }
   } 
   ngOnInit() {
   }
}

或

从输入中删除:列表为

import { Component, OnInit, Input} from '@angular/core';
import {List} from '.././list/list.model';
@Component({
  selector: 'app-list-row',
  templateUrl: './list-row.component.html',
  inputs :['list']
  styleUrls: ['./list-row.component.css'],
  host: {'class': 'row'},
})
export class ListRowComponent implements OnInit {
   list: List;
   @Input() lists: List[];

   deletelist(list: List): void {
       let index: number = this.lists.indexOf(list);
       if (index !== -1) {
           this.lists.splice(index, 1);
       }
   } 
   ngOnInit() {
   }
}