无法在Angular中读取null的属性“长度”

Question

我正在使用角度材料表。请检查以下代码。

const fruits = ['Orange', 'Apple', 'Tomato', 'Strawberry']
const fruitJuice = fruits.map(fruit => (fruit.concat(' juice!')))
console.log(fruitJuice)

我想显示带有条件的段落标签。我的问题有时 errorCodeH带有“ null”。然后发生错误。我如何处理此错误， 错误是无法读取null的属性“长度”。

您能给我更好的解决方案吗？

Answer 1

在访问length之前只需检查一个truthy值：

<table mat-table [ngClass]="'arInvTb'" [dataSource]="dataSource" multiTemplateDataRows #viewsort="matSort" matSort  matSortDirection="asc" (matSortChange)="sortData($event)" matSortActive="customSort" matSortDisableClear>

 <ng-container matColumnDef="errorCodeH">
  <th class="grid-center" mat-header-cell *matHeaderCellDef style="min-width:100px"> Error</th>
  <td class="grid-left mytext" mat-cell *matCellDef="let element"> 
    <p *ngIf="element.arInvoiceHeader.errorCodeH && element.arInvoiceHeader.errorCodeH.length < 50">
    {{element.arInvoiceHeader.errorCodeH}}                      
    </p>
  </td>
 </ng-container>
</table>

当您在JavaScript &&中使用和运算符时，如果第一个操作符为 truthy ，则将仅计算第二个操作数。

Answer 2

首先，确认errorCodeH不为null，然后使用.length。 像这样：

element.arInvoiceHeader.errorCodeH ? 
element.arInvoiceHeader.errorCodeH.length < 50 ? 
'Smaller than 50' : 
'Greater than 50' : 
'Is null'

Answer 3

在访问下面的值之前，可以在html中使用null安全运算符（？。）。

<p *ngIf="element.arInvoiceHeader.errorCodeH?.length < 50">
    {{element.arInvoiceHeader.errorCodeH}}                      
</p>

在上面的示例中，errorCodeH?.length如果errorCodeH为null或未定义，那么我们将不会收到任何错误；如果不是null且未定义，则将访问长度。