Question

如果对象的特征为true，我想获取它。我正在使用JSON数据库。我没有任何错误。我真是个陌生的人

这是我的ts文件

    export class HomeComponent implements OnInit {

      cabin: Cabin;
      cabinErrMess: string;

      constructor(
        private cabinService: CabinService,
        @Inject('BaseURL') private BaseURL) {
        }



      ngOnInit() {
        this.getFeaturedCabin();
      }

      getFeaturedCabin(): void {
        this.cabinService.getFeaturedCabin()
        .subscribe(cabin => this.cabin = cabin);
      }


    }

这是我的html

    <div  *ngIf="cabin" >   
        <img src ="{{cabin.image}}">
        <header><h1>{{cabin.name}}</h1></header>
        <p>{{cabin.description}}</p>
    </div>

这是我的服务

      getFeaturedCabin (): Observable<Cabin> {
        const url = 'http://localhost:3000/cabins?featured=true';
        return this.http.get<Cabin>(url).pipe(
          tap(_ => this.log('o')),
          catchError(this.handleError<Cabin>(`getFeaturedCabin`))
        );
      }

这是从中提取信息的JSON数据库。

              "cabins": [
        {
          "id": 0,
          "description": "Tucked away on the hillside among lush gardens of banana & citrus trees",
          "featured": "true",
                    },
        {
          "id": 1,
          "description": "Perched on the mountain side overlooking the river valley, this hand crafted wooden cabin has great panoramic views.",
          "featured": "false",
          },
        {
          "id": 2,
          "description": "Perched below the Eagles Lair, these two hand crafted wooden Cabins have spectacular views.",
          "featured": "false",

        }
      ]

Answer 1

您未正确处理数据结构，因为您的后端正在返回带有cabins作为键的对象数组，如果您有很多特色小木屋，则可以在{{1 }}指令。您还需要相应地在前端设置小木屋阵列，因此您可以执行以下操作：

在您的组件中，获取机舱列表，并将其保存在cabs属性中：

*ngFor

然后，在您的模板中，使用export class HomeComponent implements OnInit { cabins: Cabin[]; cabinErrMess: string; constructor( private cabinService: CabinService, @Inject('BaseURL') private BaseURL) { } ngOnInit() { this.getFeaturedCabin(); } getFeaturedCabin(): void { this.cabinService.getFeaturedCabin() .subscribe(response => this.cabins = <Cabin[]> response.cabins); } }伪指令遍历您的客舱数组：

ngFor

编辑：您还需要按照其他答案的说明更新服务退货类型。

享受！

Answer 2

您的服务端点正在返回对象数组，但是您正在尝试分配一个“机舱”。您将需要调整服务和组件以允许使用数组，或者更新服务端点以仅返回单个对象。

如果您更新服务：

getFeaturedCabin (): Observable<Cabin> {
    const url = 'http://localhost:3000/cabins?featured=true';
    return this.http.get<Cabin>(url).pipe(
      tap(_ => this.log('o')),
      catchError(this.handleError<Cabin>(`getFeaturedCabin`))
    );
  }

需要是：

getFeaturedCabin (): Observable<Cabin[]> {
    const url = 'http://localhost:3000/cabins?featured=true';
    return this.http.get<Cabin>(url).pipe(
      tap(_ => this.log('o')),
      catchError(this.handleError<Cabin>(`getFeaturedCabin`))
    );
  }

，并且您的组件需要允许“机舱 s ”

export class HomeComponent implements OnInit {

  cabins: Cabin[];
  ...
}

最后，更新您的模板以容纳一系列机舱：

<div *ngFor="let cabin of cabins">   
    <img src ="{{cabin.image}}">
    <header><h1>{{cabin.name}}</h1></header>
    <p>{{cabin.description}}</p>
</div>

如果您选择更新服务端点，请确保它仅返回单个对象，例如：

{
  "id": 0,
  "description": "Tucked away on the hillside among lush gardens of banana & citrus trees",
  "featured": "true",
}

如果您需要对“功能”键进行任何比较，请注意该值不是布尔值，而是字符串，因此您需要执行：if (cabin.featured === 'true') { ... }

获取对象是值是真角

2 个答案: