Как применить формат номера телефона к ячейке в таблице Angular Material

Question

Мне было интересно, как можно go применить формат североамериканского 10 di git в ячейке таблицы материалов angular. если это число 10 di git, которое я хочу отобразить как (XXX) XXX-XXXX, в противном случае это неформатное число.

<ng-container matColumnDef="number">
      <th mat-header-cell *matHeaderCellDef width="200px"> Phone Number </th>
      <td mat-cell *matCellDef="let element"> {{element.number}} </td>
</ng-container>

Теперь этот фрагмент разрезает 10 цифр, как я ожидал

 ({{element.number |slice:0:3}}) {{element.number |slice:3:6}} - {{element.number |slice:6:10}}

Но я все еще не могу объединить это с

element.number.length ===10 ? 

Поскольку это выглядит довольно грязно, есть ли другой способ отформатировать число в функции, прежде чем оно будет передано как элемент к таблице

Answer 1

С помощью этого этого ответа о переполнении стека , будет ли это полезным для вас?

Вы можете передать свой неотформатированный номер телефона в виде строки этой функции и отобразите значение в HTML следующим образом:

Ваш js:

function formatPhoneNumber(phoneNumberString) {
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    this.formattedNumber = '(' + match[1] + ') ' + match[2] + '-' + match[3];
  }
  this.formattedNumber = null;
}

Ваш HTML:

<ng-container matColumnDef="number">
      <th mat-header-cell *matHeaderCellDef width="200px"> Phone Number </th>
      <td mat-cell *matCellDef="let element"> {{formattedNumber}} </td>
</ng-container>

Answer 2

Это звучит как сценарий использования для трубы. Вы можете передать номер в канал и вывести его в формате, который вы считаете нужным. Я не уверен, есть ли встроенный канал для телефонных номеров, и если нет, то вы можете построить одно следующее вместе с angular документацией .

В конце концов, в вашем шаблоне Angular Html это будет выглядеть примерно так

<div>{{phoneNumber | my-phonenumber-pipe}}</div>