Angular：尝试将过滤器与使用RXJS操作员一起使用

Question

我有seeddata 我想使用输入按钮搜索现有数据 如果我使用的数据搜索，我希望它向我展示，我希望它写给我找不到 例如：

我的接口：

export interface Post{
    id:number,
    date: Date,
    authorName:string,
    content:string;
}

数据库服务中的Seeddata：

  export class PostDbService implements InMemoryDbService{
  
  constructor() { }
  createDb() {
    const posts: Post[] = [
      {id:1,authorName:"Daniel",content:"Amazon’s Garage Delivery Service"
      ,date:new Date('11/12/20')
    },
      {id:2,authorName:"Omer",content:"Jake From State Farm "
      ,date:new Date('12/20/21')},
      {id:3,authorName:"Lior",content:"The General"
      ,date:new Date('02/01/22')},
      {id:4,authorName:"Tomer",content:"Spotify’s Wrapped "
      ,date:new Date('11/11/20')},
    ];
    return {posts};
  }

我的组件html：

<input
  type="search"
  (input)="SearchPostsByName($event)"
  [(ngModel)]="authorName"
/>
<div *ngFor="let post of validPosts">
  <ng-container *ngIf="isExists">
    The name of the author is <b>{{ post?.authorName }}</b> with content
    <b>{{ post?.content }}</b> and released it on the date
    <b>{{ post?.date }}</b>
  </ng-container>
</div>
<br>

<form>
    <div>
        <label for="authorName">Author Name:</label>
        <br>
        <input [(ngModel)]="authorName" name="authorName" type="text" >
    </div>
    <div>
        <label for="content">Content:</label>
        <br>
        <input [(ngModel)]="content" name="content" type="text">
    </div>
    <div>
        <label for="date">Date:</label>
        <br>
        <input [(ngModel)]="date" name="date" type="date">
    </div>
    <div>
        <input type="button" value="Add posts" (click)="addPost()">
    </div>
</form>

我的component.ts：我的服务：

posts: Post[] = [];
   authorName = "";
   content = "";
   date = new Date();
   isExists = false;
   validPosts: Post[] = [];
   Search:string=''; 

  constructor(private postService: PostService) { }

  ngOnInit(): void {
    this.postService.getPosts().subscribe((posts)=> {
      this.posts = posts;
    });
  }
  addPost() {
    const post = {
      authorName: this.authorName,
      content: this.content,
      date: this.date,
      id: this.posts.length + 1
    };
    this.postService.addPost(post).subscribe(()=> {
      this.postService.getPosts().subscribe((posts)=> {
        this.posts = posts;
        this.authorName = "";
        this.content = "";
        this.date = new Date();
      });
    });
    
  }

  SearchPostsByName($event : Event) {
    console.log($event);
    if (this.authorName) {
      this.validPosts = this.posts.filter((value) => value.authorName === this.authorName!); 
      if (this.validPosts.length > 0
      ) {
        console.log('found');
        this.isExists = true;
      } else {
        this.isExists = false;
      }
    }
  }

我的服务：

export class PostService {

  private postsUrl = 'api/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.postsUrl);
  }

  addPost(post: Post): Observable<Post> {
    let httpOptions = {
      headers: new HttpHeaders({'Content-Type':'application/json'})
    };
    
    return this.http.post<Post>(this.postsUrl, post, httpOptions)
  }

Answer 1

您的功能永远不会搜索数据库，因为ISEXIT始终是错误的。由于您不共享完整的组件，我最好的猜测是尝试一下：

https://stackblitz.com/edit/angular-ivy-pvmqnr?file = src/app/app/app/app.component.html

app.component.ts.c.ponent.ts

import { Component, VERSION } from '@angular/core';

export interface Post {
  id: number;
  date: Date;
  authorName: string;
  content: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  // form variables
  authorName = '';
  content = '';
  date = new Date();

  // Array for Data
  posts: Post[] = [];

  // Array as result of filter
  validPosts: Post[] = [];
  searchName: string = '';

  // Boolean if author Exists
  isExist: boolean = false;

  constructor() {
    this.posts = this.createDb();
  }

  createDb() {
    const posts: Post[] = [
      {
        id: 1,
        authorName: 'Daniel',
        content: 'Amazon’s Garage Delivery Service',
        date: new Date(1408662000000),
      },
      {
        id: 2,
        authorName: 'Omer',
        content: 'Jake From State Farm ',
        date: new Date(1408662000000),
      },
      {
        id: 3,
        authorName: 'Lior',
        content: 'The General',
        date: new Date(1408662000000),
      },
      {
        id: 4,
        authorName: 'Tomer',
        content: 'Spotify’s Wrapped ',
        date: new Date(1408662000000),
      },
    ];
    return posts;
  }

  SearchPostsByName($event) {
    console.log($event);
    if (this.searchName) {
      this.validPosts = this.posts.filter(
        (value) => value.authorName === this.searchName!
      );
      if (this.validPosts.length > 0) {
        this.isExist = true;
      } else {
        this.isExist = false;
      }
    }
  }
  addPost() {
    const post = {
      authorName: this.authorName,
      content: this.content,
      date: this.date,
      id: this.posts.length + 1,
    };
    this.posts.push(post);
    this.authorName = '';
    this.content = '';
    this.date = new Date();
  }
}

app app.component.html

<label>Search Posts by Name </label>
<input
  type="search"
  (input)="SearchPostsByName($event)"
  [(ngModel)]="searchName"
/>
<div *ngFor="let post of validPosts">
  The name of the author is <b>{{ post?.authorName }}</b> with content
  <b>{{ post?.content }}</b> and released it on the date
  <b>{{ post?.date }}</b>
</div>
<div *ngIf="!isExist">
  <h3>No posts found</h3>
</div>

<hr />
<form>
  <div>
    <label for="authorName">Author Name:</label>
    <br />
    <input [(ngModel)]="authorName" name="authorName" type="text" />
  </div>
  <div>
    <label for="content">Content:</label>
    <br />
    <input [(ngModel)]="content" name="content" type="text" />
  </div>
  <div>
    <label for="date">Date:</label>
    <br />
    <input [(ngModel)]="date" name="date" type="date" />
  </div>
  <div>
    <input type="button" value="Add posts" (click)="addPost()" />
  </div>
</form>

Answer 2

分配第二个帖子，然后对此进行ng-for：

SearchPostsByName(authorName:string){
    this.filteredPosts = this.posts.filter(value => value.authorName === authorName);

    this.isExist = this.filteredPosts.length > 0;
    
  }

在此上方的html循环中：

<input type="search" (input)="SearchPostsByName(authorName)">
<div *ngFor="let post of filteredPosts">  
      The name of the author is <b>{{post?.authorName}}</b> with content <b>{{post?.content}}</b>
      and released it on the date <b>{{post?.date}}</b>  
</div>
<div *ngIf="!isExist">Not found</div>