如何使用 ionic 4 在输入中使用 @ 和 # 标签进行搜索？答案

【问题标题】：How to search using @ and # tags in input using ionic 4?如何使用 ionic 4 在输入中使用 @ 和 # 标签进行搜索？
【发布时间】：2019-07-04 06:01:45
【问题描述】：

我正在发布类似于 Facebook 帖子的帖子，当我在帖子中发布数据时，当我输入“@”搜索返回用户名的数据时，如果我先输入“#”来调用 API 并返回可用的标签离子 4.

我做了什么：

page.html

  <ion-item>
    <ion-textarea rows="3" (ionInput)="searchPeople($event)" cols="20" formControlName="comment"
      placeholder="Tweet your reply" spellcheck="true" autoComplete="true" autocorrect="true" autofocus required>
    </ion-textarea>
  </ion-item>

page.ts

searchPeople(ev: any) {
  // set val to the value of the searchbar
  let val = ev.target.value;
  let firstchar = val.charAt(0);

  if (firstchar = "@") {
    console.log("search people");
  }
  else if (firstchar = "#") {
    console.log("hash tag");
  } else {
   console.log("error");
  }
}

我确实喜欢这个，但它不起作用......

【问题讨论】：

你应该比较不分配更改 firstchar = "@" firstchar == "@"

标签： angular ionic-framework ionic4

【解决方案1】：

在 HTML 中：

将(ionInput)="searchPeople($event)" 更改为(input)="searchPeople($event)"..

在

TS：改变功能，如，

if (firstchar === "@") {
    console.log("search people");
  }
  else if (firstchar === "#") {
    console.log("hash tag");
  } else {
   console.log("error");
  }

这里firstchar 需要检查值，它不应该赋值。

工作示例： https://stackblitz.com/edit/ionic-basic-form-1bjibt

【讨论】：

【解决方案2】：

working example

page.html

 <ion-item>
    <ion-textarea rows="3"  (input)="searchPeople($event.target.value)"
      placeholder="Tweet your reply" spellcheck="true" autoComplete="true" autocorrect="true" autofocus required>
    </ion-textarea>
  </ion-item>

page.ts

searchPeople(searchValue : string ) {  
console.log(searchValue);
let firstchar === searchValue;

  if (firstchar === "@") {
    console.log("search people");
  }
  else if (firstchar === "#") {
    console.log("hash tag");
  } else {
   console.log("error");
  }
}
}

【讨论】：