角度未在 html 中显示插值

Question

我正在使用 spring boot + angular。

插值对我不起作用。每当我重新加载页面时，我都可以在 Spring Boot 控制台中看到更改，但 {{product.productId}} 没有在 HTML 页面中打印任何内容。

search.component.html

  <div class="form- group col-md-4 offset-4 mt-4 card card-body">
  <form >
    <input type="text" name="search" [(ngModel)] ="search" placeholder="enter the products">
  </form>
</div>

<div *ngFor="let products of products | filter:search" >
     {{products.productId}}
</div>

search.component.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  products;
  search:string;

  constructor(private service: ProductService) { }

  ngOnInit() {
        this.service.getAllProducts().subscribe(data=>{
        this.products = data ['products'];
      });

  }
}

product.service.ts（服务方法）

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';


@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private httpUrl = "http://localhost:8080/products"
  constructor(private http: HttpClient) {}

  getAllProducts(){
    return this.http.get (`${this.httpUrl}`);
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SearchComponent } from './search/search.component';
import { AddProductComponent } from './add-product/add-product.component';
import { FilterPipe } from './filter.pipe';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ProductService } from './product.service';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SearchComponent,
    AddProductComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(products,search:string):any  {
    if(search){
      return products.filter(product=>{
         return product.name.toLowerCase().includes(search.toLowerCase())
      });
    }else{
      return products;
    }
 }
}

我想在 search.component.html 中显示产品，每次重新加载页面时，我都可以看到后端（spring boot 终端）的变化，但它没有通过插值在 html 页面中打印。

Answer 1

<div *ngFor="let product of products | filter:search" >
     {{product.productId}}
</div>

更改此行。它将为您工作。当您迭代时，名称应该不同。