[英]How to bind two arrays using Input/Output Angular?
A component gets (via @Input()) 2 arrays: "users" 一个组件(通过@Input())获得2个数组:“用户”
[{Id: 1, Name: 'One'}, {Id: 2, Name: 'Two'}, {Id: 3, Name: 'Three'}]
and "selectedUsers": 和“ selectedUsers”:
[{Id: 2, Name: 'Two'}]
and outputs items on a page: One Two Three 并在页面上输出项目:一二三
"Two" - is highlighted as it is contained in array "selectedUsers". “ Two”-突出显示,因为它包含在数组“ selectedUsers”中。 How to add item from "users" array to "selectedUsers" and vice versa by click (and highlight clicked item)?
如何通过单击将项目从“用户”数组添加到“ selectedUsers”,反之亦然(并突出显示单击的项目)?
Parent component: 父组件:
users = [
{Id: 1, Name: 'One'},
{Id: 2, Name: 'Two'},
{Id: 3, Name: 'Three'}
];
usersSelected = [
{Id: 2, Name: 'Two'}
];
HTML: HTML:
<app-item (*ngFor="let u of users", [user]="u")></app-item>
Child component: 子组件:
@Input() user;
isActive: boolean = false;
toggleClass(){
this.isActive = !this.isActive;
}
HTML 的HTML
<p [class.active]="isActive" (click)="toggleClass()">{{user.Name}}</p>
Here's another try but it should be done with @Input/@Output: https://plnkr.co/edit/cjaij4aQuvN4Tk4ZE0ez?p=preview 这是另一种尝试,但是应该使用@ Input / @ Output来完成: https : //plnkr.co/edit/cjaij4aQuvN4Tk4ZE0ez?p=preview
Why do you need 2 arrays? 为什么需要2个数组? Just extend the user type with a property named
selected
of type boolean
(true/false). 只需使用名为
boolean
(true / false)类型的selected
属性扩展用户类型。 That is cleaner/easier to use then copying/removing users between the 2 arrays. 这样可以更清洁/轻松地使用,然后在两个阵列之间复制/删除用户。
users = [
{Id: 1, Name: 'One', IsSelected: false},
{Id: 2, Name: 'Two', IsSelected: true},
{Id: 3, Name: 'Three', IsSelected: false}
];
This allows any component that is used for rendering a user in the array to update the IsSelected
property directly. 这允许用于在数组中呈现用户的任何组件直接更新
IsSelected
属性。
@Input() user;
get isActive(): boolean {return this.user.IsSelected;}
toggleClass(){
this.user.IsSelected = !this.user.IsSelected;
}
Also I do not believe that is valid template syntax in your html. 另外我也不认为这是您的html中有效的模板语法。
If you like to use two arrays and a parent and child component: 如果您想使用两个数组以及一个父子组件:
https://plnkr.co/edit/uEKeMRMpLnoR49clxCfo?p=preview https://plnkr.co/edit/uEKeMRMpLnoR49clxCfo?p=preview
@Component({
selector: 'my-parent',
template: `
<my-child [users]="users" [selected]="selected" ></my-child>
`,
})
export class ParentComponent {
public users = ['one', 'two', 'three' ];
public selected = [];
}
@Component({
selector: 'my-child',
template: `
<div *ngFor="let user of users">
<p [ngClass]="{ selected: isSelected(user) }" (click)="clickOnUser(user)">{{user}}</p>
</div>
`,
styles: [`
.selected {
color: red;
}
`]
})
export class ChildComponent {
@Input()
public users: string[];
@Input()
public selected: string[];
public isSelected(user) {
return this.selected.indexOf(user) !== -1;
}
public clickOnUser(user) {
if (this.selected.indexOf(user) !== -1) {
this.selected.splice(this.selected.indexOf(user), 1);
} else {
this.selected.push(user);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.