如何以角度将下拉一个组件的值删除到另一个组件答案

【问题标题】：How to remove the value of dropdown one component to another component in angular如何以角度将下拉一个组件的值删除到另一个组件
【发布时间】：2022-11-30 16:31:10
【问题描述】：

尝试将下拉列表的值从表组件移除到 ooptymodel 组件。我使用了输入和输出装饰器。但这在这里不起作用。那么，如何从表组件中删除下拉列表的值。请帮助找到解决方案。

表格组件：

export class TableComponent implements OnInit {
@Input() names: any = [];
@Output() deletedName: EventEmitter<string> = new EventEmitter();
constructor() {}

ngOnInit() {}

onRemove(name: string) {
this.names = this.names.filter((x) => x !== name);
this.deletedName.emit(name);
}
}

ooptymodel 组件：

export class OoptymodelComponent implements OnInit {
dpData: string[] = [
'Maverick',
'Stanislav',
'Arxero',
'Feruchio',
'Mavericus',
'Arxiour',
];
deletedName: string;
constructor() {}

ngOnInit() {}

onDeletedName(name: string) {
this.deletedName = name;
}
}

演示：https://stackblitz.com/edit/angular-pass-table-data-to-input-property-dhxfq6?file=src%2Fapp%2Fshared%2Ftable%2Ftable.component.html

【问题讨论】：

兄弟姐妹之间的交流最容易通过服务或共同的父母来完成。
@DaneBrouwer：你能编辑 stackblitz 吗？
这是你应该学会做的事情。试试 google Angular Services 或 Angular Event Emitters。

标签： angular typescript angular9 angular12

【解决方案1】：

@Input 用于从父级获取数据 @Output 用于向父级发送数据。但是在您的代码中，使用组件的顺序是错误的。

并且 callFun() 不起作用，因为角度中的组件是封装的。

check this link

input output in angular

但是，您可以使用服务和 rxjs

【讨论】：