角度错误 - 无法读取未定义的属性“值”答案

【问题标题】：Angular error - Cannot read property 'value' of undefined角度错误 - 无法读取未定义的属性“值”
【发布时间】：2021-03-25 09:41:41
【问题描述】：

运行单元测试时出现错误：

TypeError: 无法读取未定义的属性“值”

在 component.ts 文件中我尝试初始化所有值：

    @Input() beneficiary: string = '';
    
        pageInfo: { startingPayment: number; endingPayment: number; total: number };
    
        history = new BehaviorSubject<[]>([]);
        history$: Observable<[]> = null;
    
        pageNumber = 1;
        maxPages: number = 0;
        maxPerPage: number = 0;
        totalPayments: number = 0;
        prevBtnDisabled = true;
        nextBtnDisabled = true;
        errorMessage: string = '';
        handleId: string = '';
        apiCalled = true;
    
        paginator: MatPaginator = null;
    
        constructor(private thirdPartyAccountsStoreService: ThirdPartyAccountsStoreService) {
            this.history$ = this.history.asObservable();
        }

    ngOnInit(): void {
        this.getPaymentInitHistory();
    }

    getPaymentInitHistory() {
        if (this.beneficiary) {
            this.apiCalled = true;
            this.resetProperties();
            this.thirdPartyAccountsStoreService.getPaymentInitHistory(this.beneficiary).subscribe(
                (result: any) => {
                    this.handleId = result.input.value;
                    this.setUpPagesProperties(result.model[0]);
                    this.handleResponse(result);
                },
                (error) => this.handleError(error)
            );
        }
    }

在 html 中，我添加了 ngIf 以在运行 ngFor 之前检查 history$：

<div *ngIf="history$">
    <div class="grid" *ngFor="let row of history$ | async">
    <div class="grid-row">
        <div class="text-size">{{ row.valuedate | appFormatDate | async }}</div>
        <div class="secondary-text">{{ row.narrative }}</div>
    </div>
    <div class="grid-row-end">
        <div class="text-size">
            <app-amount [value]="row.credit" [currency]="row.currency"></app-amount>
        </div>
        <div class="secondary-text">{{ row.contranarrative }}</div>
    </div>

我不确定是什么导致了这个错误。唯一使用value 的地方是在html 页面[value]="row.credit" 中，我尝试过使用[value]="row?.credit"，但这也没有用。在文件this.handleId = result.input.value; 的ts 文件中，但我添加了一个检查 if (this.beneficiary)，因此如果该字段为空，则不应运行函数中的代码

【问题讨论】：

你能添加导致错误的行吗？给定的 sn-p 不包含字段“值”的使用。

标签： angular typescript

【解决方案1】：

这可能是因为 history$，而您在 async 视图中使用它。

您正在使用 null 对其进行初始化。因此 async 将在视图初始化后立即开始评估 history$ 的值，因此您会收到错误消息。

尝试像下面这样初始化history$

history$: Observable<[]> = new Observable();

编辑：

您可以尝试通过两种方式进行初始化：

history$ = Observable.of<any>([]);

通过这样做，这个 Object 将立即被初始化为 Observable。 (what is the difference between "new Observable()" and "of()" in RxJs)

*ngIf="(history$ | async).length"

我们也可以在评估之前检查它..

编码愉快.. :)

【讨论】：

仍然收到错误.. 添加<div *ngIf="history$"> 不起作用吗？如果history$ 为空，则不应运行 ngFor。这就是我试图阻止这个错误的方法。还是有其他方法可以检查历史记录$？

【解决方案2】：

不幸的是，您裁剪了堆栈跟踪中最重要的部分，但我会大胆猜测：

getPaymentInitHistory() {
    if (this.beneficiary) {
        this.apiCalled = true;
        this.resetProperties();
        this.thirdPartyAccountsStoreService.getPaymentInitHistory(this.beneficiary).subscribe(
            (result: any) => { 
                // I guess here's the problem
                this.handleId = result.input.value;
                this.setUpPagesProperties(result.model[0]);
                this.handleResponse(result);
            },
            (error) => this.handleError(error)
        );
    }
}

result 可能没有属性input。因此result.input 被解析为undefined。而undefined.value 会导致错误消息：Cannot read property 'value' of undefined。

因此，只要属性 input 缺失，使用 this.handleId = result.input?.value ?? '-1'; 和 handleId 就会变为 '-1'。

供参考：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining 和 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#nullish-coalescing

【讨论】：