在字段中输入3个字符后如何执行API调用？

Question

我正在使用父子组件。子组件有输入字段，并将用户输入的值发送给父组件，如下所示：

<parent-component (sendInputValue)="getInputValue($event)"><parent-component>

现在在父组件中我有这个：

getInputField(data){

 console.log(data); // this prints the data (Example: abc)

 //  then here I'm just executing the API call ONLY if data length is 3

  if(data.length === 3){

    this.myService.getDataFromService(data).subscribe(rs=>console.log(rs));

  }

}

现在假设发生这种情况：

1. 用户输入：abc // API 调用得到执行，这很好

2. 现在，用户输入：abcd // 没有 API 调用被执行，这很好

3. 现在用户删除字母“d”，数据的新值将是“abc”我不想再次执行 API 调用，因为我们已经执行了“abc”的 API 调用

4. 现在，如果用户删除字母“c”，数据的新值现在是“ab”。此时，预计不会有 API 调用

5. 现在，如果用户添加字母“c”，新值将是“abc”。此时，API 调用是预期的。（这是有效的）

那么，如果输入数据是 3 个字符，并且如果用户输入更多字符，则如何始终执行 API 调用，如果用户删除字符并返回到前 3 个字符，则不应发生任何事情，因为 API 已经发生了？非常感谢！

Answer 1

我认为您需要distinctUntilChanged&nbsp;并且可以在管道中使用过滤器this.myService.getDataFromService(data)&nbsp; .pipe(&nbsp; &nbsp; filter(_ => data.length === 3),&nbsp;&nbsp; &nbsp; distinctUntilChanged()&nbsp; ).subscribe(rs => console.log(rs));

Answer 2

下面是您的代码中的小调整，它将满足您告诉的要求。您绝对可以使用 debounce、distinctUntilChanged、switchMap 运算符改进此过程。previousData = '' // create a property which will track of previous data from parent component.getInputField(data){&nbsp; if(data && data.length === 3 && data.length > previousData.length){&nbsp; &nbsp; this.myService.getDataFromService(data).subscribe(rs=>console.log(rs));&nbsp; }&nbsp; this.previousData = data || ''; // update previous data to current data after backend call.}

Answer 3

使用RxJs FromEvent方法从input字段中监听输入事件。@ViewChild('#input', {static:true}) inputField: ElementRef<any>;ngOnInit(){&nbsp; &nbsp;FromEvent(inputField, 'input')&nbsp; &nbsp; &nbsp;.pipe(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;map(event => event.target.value),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;map((value:string) => value.trim()),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;filter((value:string) => value.length === 3),&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;debounceTime(500),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;distinctUntilChanged()&nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp;.subscribe(keyword => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// API Call(keyword)&nbsp; &nbsp; &nbsp;})}

Answer 4

我制作了一个通用函数，您可以将它用于任意数量的字符以限制您的 API 调用。const cached = {};/**&nbsp;* @desc Check if API call is allowed or not&nbsp;&nbsp;* based on provided input and length condition&nbsp;* @param {String} input - input value&nbsp;* @param {Number} len&nbsp; &nbsp;- length of the input over which API has to be called.&nbsp;* @returns {Boolean}&nbsp;*/function doCallAPI(input, len) {&nbsp; if(input.length === len) {&nbsp; &nbsp; if(!cached[input]) {&nbsp; &nbsp; &nbsp; // Call the API&nbsp; &nbsp; &nbsp; cached[input] = 1;&nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; }&nbsp; }&nbsp; else if(input.length < len) for(let i in cached) cached[i] = 0;&nbsp; return false}解释：检查输入的长度是否等于条件长度（此处为 3）。如果否，则不会为此输入值调用 API。现在，SET cached[input value] = 1，在缓存对象中插入值。如果是，则检查缓存的对象是否具有具有输入值的键并且它具有值（例如 1）返回 true，表示允许调用 API。检查输入的长度 (Say, 2) 是否小于条件长度。然后，遍历缓存对象并将所有内容设置为 0，以告知现在允许对条件长度的缓存值进行 API 调用（此处为 3）。返回 false，告诉 API 调用是不允许的。这是如何使用它，getInputField(data){&nbsp;console.log(data); // this prints the data (Example: abc)&nbsp;//&nbsp; then here I'm just executing the API call ONLY if data length is 3&nbsp; if(doCallAPI(data, 3)){&nbsp; &nbsp; this.myService.getDataFromService(data).subscribe(rs=>console.log(rs));&nbsp; }}

Answer 5

&nbsp;private lastLetter = "";&nbsp; &nbsp; getInputField(data) {&nbsp; &nbsp; &nbsp;if(!this.lastLetter === data.toLowerCase()) && data.length === 3) {&nbsp; &nbsp; &nbsp; &nbsp; this.myService.getDataFromService(data).subscribe(rs=>{&nbsp; &nbsp; &nbsp; &nbsp; this.lastLetter = data.toLowerCase();&nbsp; &nbsp; &nbsp; &nbsp; console.log(rs)&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }我想这行得通

Answer 6

首先，让我们让您的输入数据可观察 - 以便更容易实现其他一切：private inputData$ = new Subject<string>();public getInputField(data: string){&nbsp; this.inputData$.next(data);}现在我们可以用这个输入流做任何我们想做的事。例如，采用上面@Thorsten Rintelen 建议的方法ngOnInit() {&nbsp; this.inputData$&nbsp; &nbsp; .pipe(&nbsp; &nbsp; &nbsp; filter(data => data.length === 3),&nbsp; &nbsp; &nbsp; distinctUntilChanged(), // this makes sure api call is sent only if input has changed&nbsp; &nbsp; &nbsp; switchMap(data => this.myService.getDataFromService(data)),&nbsp; &nbsp; )&nbsp; &nbsp; .subscribe(apiResult => console.log(apiResult));}注意： 这种方法只缓存最后的输入。如果您想缓存和重用所有 api 响应，您可以将 api 服务方法包装到某个缓存层中，而无需更改任何其他内容。