[英]Share value between variables is not working in Angular
我正在用Angular 5实现一个搜索框。我有一个用于搜索框的组件,另一个是用于搜索结果的组件。 当我通过输入元素将值传递给search.component.html中的变量'v'
时,它会更新search-result.component.ts
的'v',因此html中的{{v}}会显示我输入的值。
为了过滤数组,我将'v'
设为'term'
并执行过滤功能。 但是,在加载页面后,它仅显示{{v}}值,而不显示{{term}}和{{filterarray}}
这是怎么了
search.component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { error } from 'util';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
title = 'app';
v: string;
@Output() valueEvent = new EventEmitter<string>();
constructor(){}
sendValue(){
this.valueEvent.emit(this.v)
}
ngOnInit()
}
}
saerch.component.html:
<input type="text" [(ngModel)]="v"><button (click)="sendValue()">Search</button>
saerch-result.component.ts:
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-search-result',
templateUrl: './search-result.component.html',
styleUrls: ['./search-result.component.css']
})
export class SearchResultComponent{
v: string;
term: string = this.v;
array: any[]=[{'id':1,'name':'Jones'},{'id':2,'name':'Duke'},{'id':3,'name':'Frank'},{'id':4,'name':'Jonas'}];
filterarray: any[];
constructor(){
this.filterarray=this.array.filter(f => f.name.includes(this.term)).map(searchname=>searchname.name);
}
receiveValue($event){
this.v = $event
}
}
search-result.component.html:
<app-search (valueEvent)="receiveValue($event)"></app-search>
<p>{{v}}</p>
<p>{{term}}</p>
<p>{{filterarray}}</p>
您需要移动以下行:
this.filterarray=this.array.filter(f => f.name.includes(this.term)).map(searchname=>searchname.name);
到里面:
receiveValue($event){
this.v = $event
}
所以像这样:
receiveValue($event){
this.v = $event
this.filterarray=this.array.filter(f => f.name.includes(this.term)).map(searchname=>searchname.name);
}
这样,用户每次点击搜索按钮时,阵列都会被更新。
您需要移动过滤器,还需要将值分配给内部的receiveValue方法
像这样,
v: string;
term: string;
array: any[] = [{ 'id': 1, 'name': 'Jones' }, { 'id': 2, 'name': 'Duke' }, { 'id': 3, 'name': 'Frank' }, { 'id': 4, 'name': 'Jonas' }];
filterarray: any[];
constructor() { }
receiveValue(event) {
this.v = event;
this.term = this.v;
this.filterarray = this.array.filter(f => f.name.includes(this.term)).map(searchname => searchname.name);
}
这是Stackblitz演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.