第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

在字段中輸入3個(gè)字符后如何執(zhí)行API調(diào)用？

在字段中輸入3個(gè)字符后如何執(zhí)行API調(diào)用？

明月笑刀無情 2022-12-22 14:39:58
我正在使用父子組件。子組件有輸入字段，并將用戶輸入的值發(fā)送給父組件，如下所示：<parent-component (sendInputValue)="getInputValue($event)"><parent-component>現(xiàn)在在父組件中我有這個(gè)：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));  }}現(xiàn)在假設(shè)發(fā)生這種情況：用戶輸入：abc // API 調(diào)用得到執(zhí)行，這很好現(xiàn)在，用戶輸入：abcd // 沒有 API 調(diào)用被執(zhí)行，這很好現(xiàn)在用戶刪除字母“d”，數(shù)據(jù)的新值將是“abc”我不想再次執(zhí)行 API 調(diào)用，因?yàn)槲覀円呀?jīng)執(zhí)行了“abc”的 API 調(diào)用現(xiàn)在，如果用戶刪除字母“c”，數(shù)據(jù)的新值現(xiàn)在是“ab”。此時(shí)，預(yù)計(jì)不會(huì)有 API 調(diào)用現(xiàn)在，如果用戶添加字母“c”，新值將是“abc”。此時(shí)，API 調(diào)用是預(yù)期的。（這是有效的）那么，如果輸入數(shù)據(jù)是 3 個(gè)字符，并且如果用戶輸入更多字符，則如何始終執(zhí)行 API 調(diào)用，如果用戶刪除字符并返回到前 3 個(gè)字符，則不應(yīng)發(fā)生任何事情，因?yàn)?API 已經(jīng)發(fā)生了？非常感謝！
查看完整描述

6 回答

?
慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

我認(rèn)為您需要distinctUntilChanged 并且可以在管道中使用過濾器

this.myService.getDataFromService(data)

  .pipe(

    filter(_ => data.length === 3), 

    distinctUntilChanged()

  ).subscribe(rs => console.log(rs));


查看完整回答
反對(duì) 回復(fù) 2022-12-22
?
阿晨1998

TA貢獻(xiàn)2037條經(jīng)驗(yàn) 獲得超6個(gè)贊

下面是您的代碼中的小調(diào)整，它將滿足您告訴的要求。


您絕對(duì)可以使用 debounce、distinctUntilChanged、switchMap 運(yùn)算符改進(jìn)此過程。


previousData = '' // create a property which will track of previous data from parent component.


getInputField(data){

  if(data && data.length === 3 && data.length > previousData.length){

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

  }

  this.previousData = data || ''; // update previous data to current data after backend call.

}


查看完整回答
反對(duì) 回復(fù) 2022-12-22
?
翻閱古今

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊

使用RxJs FromEvent方法從input字段中監(jiān)聽輸入事件。


@ViewChild('#input', {static:true}) inputField: ElementRef<any>;


ngOnInit(){

   FromEvent(inputField, 'input')

     .pipe(

         map(event => event.target.value),

         map((value:string) => value.trim()),

         filter((value:string) => value.length === 3), 

         debounceTime(500),

         distinctUntilChanged()

     )

     .subscribe(keyword => {

         // API Call(keyword)

     })

}


查看完整回答
反對(duì) 回復(fù) 2022-12-22
?
暮色呼如

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊

我制作了一個(gè)通用函數(shù)，您可以將它用于任意數(shù)量的字符以限制您的 API 調(diào)用。


const cached = {};

/**

 * @desc Check if API call is allowed or not 

 * based on provided input and length condition

 * @param {String} input - input value

 * @param {Number} len   - length of the input over which API has to be called.

 * @returns {Boolean}

 */

function doCallAPI(input, len) {

  if(input.length === len) {

    if(!cached[input]) {

      // Call the API

      cached[input] = 1;

      return true;

    }

  }

  else if(input.length < len) for(let i in cached) cached[i] = 0;

  return false

}

解釋：

  1. 檢查輸入的長度是否等于條件長度（此處為 3）。

    • 如果否，則不會(huì)為此輸入值調(diào)用 API?，F(xiàn)在，

    • SET cached[input value] = 1，在緩存對(duì)象中插入值。

    • 如果是，則檢查緩存的對(duì)象是否具有具有輸入值的鍵并且它具有值（例如 1）

    • 返回 true，表示允許調(diào)用 API。

  2. 檢查輸入的長度 (Say, 2) 是否小于條件長度。

  3. 然后，遍歷緩存對(duì)象并將所有內(nèi)容設(shè)置為 0，以告知現(xiàn)在允許對(duì)條件長度的緩存值進(jìn)行 API 調(diào)用（此處為 3）。

  4. 返回 false，告訴 API 調(diào)用是不允許的。

這是如何使用它，

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(doCallAPI(data, 3)){

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

  }

}


查看完整回答
反對(duì) 回復(fù) 2022-12-22
?
翻翻過去那場雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

 private lastLetter = "";


    getInputField(data) {

     if(!this.lastLetter === data.toLowerCase()) && data.length === 3) {

        this.myService.getDataFromService(data).subscribe(rs=>{

        this.lastLetter = data.toLowerCase();

        console.log(rs)

        });

      }

    }

我想這行得通


查看完整回答
反對(duì) 回復(fù) 2022-12-22
?
婷婷同學(xué)_

TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊

首先，讓我們讓您的輸入數(shù)據(jù)可觀察 - 以便更容易實(shí)現(xiàn)其他一切：


private inputData$ = new Subject<string>();


public getInputField(data: string){

  this.inputData$.next(data);

}

現(xiàn)在我們可以用這個(gè)輸入流做任何我們想做的事。例如，采用上面@Thorsten Rintelen 建議的方法


ngOnInit() {

  this.inputData$

    .pipe(

      filter(data => data.length === 3),

      distinctUntilChanged(), // this makes sure api call is sent only if input has changed

      switchMap(data => this.myService.getDataFromService(data)),

    )

    .subscribe(apiResult => console.log(apiResult));

}

注意： 這種方法只緩存最后的輸入。如果您想緩存和重用所有 api 響應(yīng)，您可以將 api 服務(wù)方法包裝到某個(gè)緩存層中，而無需更改任何其他內(nèi)容。


查看完整回答
反對(duì) 回復(fù) 2022-12-22
  • 6 回答
  • 0 關(guān)注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)