Как применить гиперссылку в зависимости от деталей, извлеченных из API In Ionic

Question

Я работаю над Ionic Project, и у меня есть страница контактов, которая извлекает детали из API.Я хочу применить гиперссылку в соответствии с выбранными данными, например, если это номер мобильного телефона, то применяется tel, а для электронной почты mailto.

Это мой contact.html :

<ion-content padding overflow-scroll="true">
  <ion-grid align-items-center justify-content-center>
    <ion-row align-items-center justify-content-center>
      <ion-col class="mycol22" col-12 *ngFor="let contdetails of this.detailscontact">
          <h3 class="myneh31">{{contdetails?.sub_head}}</h3>
          <hr />
          <a href="tel or mailto"><p class="newmyp2">{{contdetails?.sub_content_first}}</p></a>
          <a href="tel or mailto"><p class="newmyp2">{{contdetails?.sub_content_second}}</p>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Проблема в том, как решить, применять ли tel или mailto в зависимости от извлеченного значения.Это мой вывод в соответствии с данными, извлеченными из API.Теперь я хочу применить гиперссылку в зависимости от деталей, извлеченных из API.Для Email : mailto будет применяться и для Номер мобильного телефона : tel.

Любая помощь очень ценится.

Answer 1

Сначала вы должны проверить, являются ли данные типом электронной почты или нет.Используйте эту функцию в качестве валидатора электронной почты.

emailValidator(email:string): boolean {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return false;
    }
    return true; 
}

И на своей html-странице

<a href="{{emailValidator(email) == true ? 'mailto' || 'tel'}}"></a>

Для простоты вы можете вернуть строку из функции emailValidator:

emailValidator(email:string): string {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return 'mailto';
    }
    return 'tel'; 
}

и в HTML вы можете использовать

<a href="{{emailValidator(email)}}"></a>

Answer 2

* нг, если пригодится:

  <a href="tel" *ngIf="condition">...</a> // or any boolean as condition
  <a href="mailto" *ngIf="!condition">...</a>  // or any other condition