[英]Angular 5 Deleting object from array in parent component
I am new to angular. 我是新手。
I am making a Quote listing website in Angular 5. The child component "Quotes" is where the user interacts while the array I would like to delete form is in app.component.ts. 我正在Angular 5中创建一个报价清单网站。子组件“ Quotes”是用户互动的地方,而我要删除的表单数组位于app.component.ts中。 Each quote is an object in an array and I would like the entire object to be deleted when the delete button is clicked but I just get loads of errors. 每个引用都是数组中的一个对象,当我单击删除按钮时,我希望删除整个对象,但我只会收到很多错误。 The current delete button in the "quotes" component html is as follows: “ quotes”组件html中的当前删除按钮如下:
<a href (click)="delete(true)">
<i class="trash icon"></i>
Delete
</a>
My app.component.ts is as follows: 我的app.component.ts如下:
delete(isComplete,index){
if (isComplete){
let toDelete=confirm(`Are you sure you want to delete ${this.quotes[index]}`)
if(toDelete){
this.quotes.splice(index,1)
}
}
}
My app.component.html is as follows: 我的app.component.html如下:
<div *ngFor="let quote of sortedQuotes(); let i = index" [quote]="quote">
<app-quote 'deleteQuote($event,i)'>
</app-quote>
</div>
It does not currently work as adding the delete functions broke something. 由于添加删除功能损坏了某些内容,因此当前不起作用。 I am getting the error: 我收到错误消息:
Uncaught Error: Template parse errors:
Unexpected closing tag "app-quote". It may happen when the tag has
already been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags (" of sortedQuotes(); let i = index" [quote]="quote">
<app-quote 'deleteQuote($event,i)'>
[ERROR ->]</app-quote>
</div>
</div>"): ng:///AppModule/AppComponent.html@18:6
at syntaxError (compiler.js:485)
at DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3220)
at eval (compiler.js:3200)
at Object.then (compiler.js:474)
at DirectiveNormalizer._preParseTemplate (compiler.js:3200)
at DirectiveNormalizer.normalizeTemplate (compiler.js:3178)
at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14908)
at eval (compiler.js:34412)
at Array.forEach (<anonymous>)
at eval (compiler.js:34411)
you need EventEmitter that will emit event from your child component 您需要EventEmitter将从子组件中发出事件
<app-quote (delete)='deleteQuote($event,i)'>
</app-quote>
child component.ts must be like this 子component.ts必须是这样的
@Output() delete:EventEmitter<type> = new EventEmitter<type>();
onDeleteButtonClick() {
//you need to emit event
delete.emit();
// this can be done from button click mostly, which i am guessing is your case
}
and you parent component.ts will be 而您的父component.ts将是
deleteQuote(event:type,i:type) {
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.