如何将电话号码格式应用于角度材料表中的单元格

Question

我想知道如何应用北美 10 位数字的格式 角度材料表的单元格。如果它是一个 10 位数字，我想显示为 (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;
}

您的网页：

<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 Html 模板中，它看起来像这样

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