[英]Can't get updated value from service variable
I'm trying to apply a filter to search items based on a service variable which is updated with an input from that service.我正在尝试根据服务变量应用过滤器来搜索项目,该服务变量使用来自该服务的输入进行更新。 But I'm just getting the initial value from the service in my component但我只是从组件中的服务中获取初始值
Service HTML (whatever I type in is assigned to the variable searchInput correctly):服务 HTML (我输入的任何内容都被正确分配给变量 searchInput):
<input [value]="searchInput" (keyup)="searchInputChange.next(searchFilterService.applyFilter($event.target.value))">
Service TS (it's called component since I already have a service with the same name atm):服务 TS (它被称为组件,因为我已经有一个同名 atm 的服务):
export class SearchFilterComponent {
searchInput: string = 'test';
searchInputChange: Subject<string> = new Subject<string>();
constructor(
public searchFilterService: SharedSearchFilterService) {
this.searchInputChange.subscribe((value) => {
this.searchInput = value
});
}
getSearchInput(): string {
return this.searchInput;
}
}
Filter Service TS :过滤服务 TS :
@Injectable()
export class SharedSearchFilterService {
applyFilter(filterValue: string) {
if (filterValue) return filterValue;
else return ''; // I need this to avoid getting 'undefined'
}
}
Component HTML (here I'm getting the initial value which is 'test', then it never gets the new value from the service):组件 HTML (这里我得到的初始值是“测试”,然后它永远不会从服务中获取新值):
<ng-container *ngIf="searchFilterService.licenceFilter(item, service.getSearchInput())">
Link to an example: https://stackblitz.com/edit/angular-buagfs链接到示例: https : //stackblitz.com/edit/angular-buagfs
The AppService
in your sample is a component.示例中的AppService
是一个组件。 You have to use @Output
to notify value.您必须使用@Output
来通知值。
app.service.ts应用服务.ts
@Component({
selector: 'search-component',
template: `
<div fxLayout="row" fxLayoutAlign="space-between center">
<input
[(ngModel)]="searchInput"
(keyup)="onKeyUp()"
/>
</div>
`
})
export class AppService implements OnInit {
searchInput: string = 'test';
@Output() inputValue = new EventEmitter<string>();
constructor() {
}
ngOnInit() {
this.inputValue.emit(this.searchInput);
}
onKeyUp(): void {
this.inputValue.emit(this.searchInput);
}
getSearchInput(): string {
return this.searchInput;
}
}
app.component.html应用程序组件.html
<hello name="{{ name }}"></hello>
<search-component (inputValue)="onInputValueEmitted($event)"></search-component>
<div *ngIf="searchInput == 'test'">This shouldn't be seen if value is not 'test'</div>
app.component.ts app.component.ts
import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
searchInput = '';
constructor(private service: AppService) {}
onInputValueEmitted(value: string) {
this.searchInput = value;
}
}
you need equal the variable this.searchInput
to the value you pass to the function getSearchInput
您需要将变量this.searchInput
等于您传递给函数getSearchInput
的值
//see that the function has an argument
getSearchInput(searchInput:string): string {
this.searchInput=searchInput //<--first equal the variable
return this.searchInput;
}
BTW, Angular have yet a way to get your achieve: the FormControl and the valueChanges .顺便说一句,Angular 还没有办法让你实现: FormControl 和valueChanges 。
if you use a FormControl in your .html如果您在 .html 中使用 FormControl
<input [formControl]="control" />
In your .ts在你的 .ts
//create a "getter" to access easy to this.control.value
get searchInput()
{
return this.control.value
}
set searchInput(value)
{
this.control.setValue(value)
}
control=new FormControl()
constructor() {
this.control.valueChanges.subscribe(value => {
console.log('Prueba de subject: ', value);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.