如何在我的html文件中使用私有属性

Question

我正试图在我的html页面中显示动物列表及其相应的名称和颜色。我的前端从spring后端获取数据，该后端返回动物列表。我偶然发现了两个问题：

1(我在Animal类中将名称和颜色属性设置为私有属性。

动物分类代码：

interface AnimalJson {
name: string;
color: string;
}
export class Animal {
constructor(private name: string, private color: string) {}
static fromJSON(json: AnimalJson): Animal {
const a = new Animal(json.name, json.color);
return a;
}
}

我的动物组件代码：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { DataServiceService } from '../data-service.service';
import { Animal } from '../models/Animal';
@Component({
selector: 'app-animal',
templateUrl: './animal.component.html',
styleUrls: ['./animal.component.css'],
})
export class AnimalComponent implements OnInit {
public animals: Observable<Animal[]>;
constructor(private dataService: DataServiceService) {
this.animals = new Observable<Animal[]>();
}
ngOnInit(): void {
this.animals = this.dataService.getAnimals();
}
}

服务代码：

@Injectable({
providedIn: 'root',
})
export class DataServiceService {
constructor(private http: HttpClient) {}
getAnimals(): Observable<Animal[]> {
return this.http
.get<Animal[]>('http://localhost:8080/animals')
.pipe(map((animals: any[]): Animal[] => animals.map(Animal.fromJSON)));
}
}

html页面的代码：

<div *ngFor="let animal of animals | async">
<p>{{ animal.name }}</p>
</div>

现在，当我尝试获取animal.name时，会出现一个错误，即该名称是私有的，因此我无法在我的html页面中使用它。我应该如何解决这个问题？我应该公开吗？还是我忘了什么？

2(这就是处理可观察性的方式吗？或者我是不是以错误的方式使用了我的可观察性？

使用http-get方法来获取可观察的结果，然后在我的动物组件中调用它，并在我的html文件中使用async来遍历其中的所有值？

Answer 1

如果使用private，则不应在html中使用它，不确定为什么要使用class来初始化数组。只需使用一个简单的map语句。

如果您要在HTML中显示它，那么不要将该属性设置为私有属性。

变化是这样的。

interface Animal {
name: string;
color: string;
}

将提供服务。

@Injectable({
providedIn: 'root',
})
export class DataServiceService {
constructor(private http: HttpClient) {}
getAnimals(): Observable<Animal[]> {
return this.http
.get<Animal[]>('http://localhost:8080/animals')
.pipe(map((animals: any[]): Animal[] => animals.map((item: Animal) => ({name: item.name, color: item.color}))));
}
}

注意：类也可以用作接口，所以当使用animal时，您将属性定义为private，因此无法在HTML中使用。