无法从服务变量获取更新值

Question

我正在尝试根据服务变量应用过滤器来搜索项目，该服务变量使用来自该服务的输入进行更新。但我只是从组件中的服务中获取初始值

Service HTML（我输入的任何内容都正确分配给了变量 searchInput）：

<input [value]="searchInput" (keyup)="searchInputChange.next(searchFilterService.applyFilter($event.target.value))">

服务 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;
    }
}

过滤服务 TS:

@Injectable()
export class SharedSearchFilterService {
    
    applyFilter(filterValue: string) {

        if (filterValue) return filterValue;
        else return ''; // I need this to avoid getting 'undefined'
    }
}

Component HTML（这里我得到的初始值为 'test'，然后它永远不会从服务中获取新值）：

<ng-container *ngIf="searchFilterService.licenceFilter(item, service.getSearchInput())">

Link 举个例子：https://stackblitz.com/edit/angular-buagfs

Answer 1

您需要使变量 this.searchInput 等于您传递给函数的值 getSearchInput

//see that the function has an argument
getSearchInput(searchInput:string): string {
    this.searchInput=searchInput //<--first equal the variable
    return this.searchInput;
  }

顺便说一句，Angular 还有一种方法可以让你获得成就：FormControl 和 valueChanges。

如果您在 .html

中使用 FormControl

<input [formControl]="control" />

在你的.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);
  });
}

Answer 2

您的示例中的 AppService 是一个组件。您必须使用 @Output 来通知值。

app.service.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

<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

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;
  }
}

Stackblitz sample

无法从服务变量获取更新值

Can't get updated value from service variable

angular

typescript

subject