我有以下代碼，我試圖通過鍵入一個字串來搜索“失敗簽名”列，每當我鍵入一個搜索字串時，它似乎都不起作用，資料不會根據給定的搜索字串進行過濾并拋出錯誤如下所示，我指出了它拋出錯誤的行。
我創建了一個 stackblitz 鏈接來復制錯誤，令人驚訝的是它可以使用虛擬資料，當我切換到后端 URL 以從資料庫中獲取資料時，我遇到了這個錯誤
以下是包含完整代碼的 stackblitz 鏈接
https://stackblitz.com/edit/angular-uxnrrr?file=src/app/failure-signature/failure-signature.component.html
失敗signature.component.html
<html ng-app="failure-signature">
<h1>Root cause analysis Dashboard</h1>
<nav class="navbar">
<input
class="form-control"
type="text"
name="Failure_signature"
[(ngModel)]="Failure_signature"
(ngModelChange)="Search($event)"
placeholder="Search for failure signature...."
/>
</nav>
<table class="table table-bordered">
<thead>
<tr>
<!--<th>id</th>-->
<th>commit</th>
<th>gerrit</th>
<th>failure_signature</th>
<!--<th>commit_message</th>-->
</tr>
</thead>
<tbody>
<tr *ngFor="let cm of wifi_gerrit_commit_messages?.posts">
<!--<tr *ngFor= "let cm of wifi_gerrit_commit_messages">-->
<!--<td>{{cm._id}}</td>-->
<td>{{cm.commit_id}}</td>
<td>{{cm.gerrit}}</td>
<td>{{cm.Failure_signature}}</td>
<!--<td>{{cm.commit_message}}</td>-->
</tr>
</tbody>
</table>
</html>
失敗signature.component.ts
import { Component, OnInit, Injectable, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { DomSanitizer } from '@angular/platform-browser';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { enableProdMode } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { wifi_gerrit_commit_messages } from '../_model/wifi_gerrit_commit_messages';
import { FailureSignatureService } from './failure-signature-service';
import { RESOURCE_CACHE_PROVIDER } from '@angular/platform-browser-dynamic';
@Component({
selector: 'app-failure-signature',
templateUrl: './failure-signature.component.html',
styleUrls: ['./failure-signature.component.css'],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class FailureSignatureComponent {
wifi_gerrit_commit_messages: wifi_gerrit_commit_messages[] = [];
Failure_signature: any;
constructor(public fss: FailureSignatureService) {}
ngOnInit(): void {
this.fss.get_wifi_gerrit_commit_messages().subscribe((Response) => {
this.wifi_gerrit_commit_messages = Response;
//console.log(Response)
});
}
Search(value: string) {
if (value == '') {
this.ngOnInit();
} else {
this.wifi_gerrit_commit_messages = this.wifi_gerrit_commit_messages.filter((res) => {
return res.Failure_signature.toLocaleLowerCase().match(this.Failure_signature.toLocaleLowerCase());
});
}
}
}
Error Line:-
this.wifi_gerrit_commit_messages = this.wifi_gerrit_commit_messages.filter(res => {
return res.Failure_signature.toLocaleLowerCase().match(this.Failure_signature.toLocaleLowerCase());
錯誤：-
at FailureSignatureComponent.push../src/app/failure-signature/failure-signature.component.ts.FailureSignatureComponent.Search (failure-signature.component.ts:50)
at Object.eval [as handleEvent] (FailureSignatureComponent.ngfactory.js:62)
at Object.handleEvent (core.js:27341)
at Object.handleEvent (core.js:27886)
at dispatchEvent (core.js:18085)
at core.js:19288
at SafeSubscriber.schedulerFn [as _next] (core.js:22113)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
uj5u.com熱心網友回復：
可以肯定的是，您可以為過濾結果創建新屬性嗎？而是
wifi_gerrit_commit_messages在你的 component.ts 中進行變異我看到您的過濾器已打開，
this.wifi_gerrit_commit_messages并且您將 *ngFor 應用于wifi_gerrit_commit_messages?.posts（帶有帖子欄位）。這真的是你的意圖嗎？
uj5u.com熱心網友回復：
演示 如果您使用原始值進行過濾，那么您也會丟失重要的部分，并且由于您正在更改原始資料，您會將資料丟失到另一個過濾器。如果您不想使用第二個變數，那么您可以使用僅在 html 而非資料中自定義的管道。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search',
})
export class SearchPipe implements PipeTransform {
transform(value: any[], param: string): any {
return value.filter(
(x) =>
param == null ||
param == '' ||
x.commit_id.toLocaleLowerCase().includes(param.toLocaleLowerCase()) ||
x.gerrit.toLocaleLowerCase().includes(param.toLocaleLowerCase()) ||
x.Failure_signature.toLocaleLowerCase().includes(
param.toLocaleLowerCase()
)
);
}
}
和
在你的 html 中實作它
*ngFor="let cm of wifi_gerrit_commit_messages | search: Failure_signature "
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392327.html