角度未在html中显示插值

Question

我使用的是弹簧引导+角度引导。

插值对我不起作用。每当我重新加载页面时，我都可以在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 { }

过滤器.管道.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>

更改此行。它对你有用。当你在迭代时，名称应该是不同的。