在React中,我拥有一个对服务器进行API调用并获取响应的视图。响应的类型为ApiResponseModel
// omissis - imports section
interface IProductViewState {
products: ProductModel[];
}
export class ProductView extends Component<{}, IProductViewState> {
constructor(props: {}) {
super(props);
this.state = {
products: new Array<ProductModel>(),
};
}
public componentDidMount() {
HttpService.getProducts().then((data: ApiResponseModel) => {
this.setState({
products: data.Result.Results as ProductModel[],
});
});
}
public render() {
return (
<DataTable value={this.state.products} selectionMode="single" header="Prodotti" rows={30}
responsive={true}>
<Column field="Timer1" header={"Product_Timer1"} sortable={true} />
// some other columns
</DataTable>
);
}
}
ApiResponseModel类如下
export class ApiResponseModel {
public Result: any;
}
ProductModel类如下
export class ProductModel {
// some properties
private _TIMER1!: any;
public get Timer1(): any {
return _TIMER1 + " minutes";
}
public set Timer1(v: any) {
this._TIMER1 = v;
}
}
现在的问题是,将模型加载到DataTable组件时,永远不会调用Timer1属性的get
方法。出于测试目的,我尝试编写以下代码,在这种情况下,将数据加载到DataTable中时将调用get
方法。
export class ProductView extends Component {
public products = new Array<ProductModel>();
constructor(props: {}) {
super(props);
}
public getProducts() {
const products = new Array<ProductModel>();
const product = new ProductModel();
product.Timer1 = 12;
products.push(product);
return products;
}
public render() {
return (
<DataTable value={this.getProducts()} selectionMode="single" header="Prodotti" rows={30}
responsive={true}>
<Column field="Timer1" header={"Product_Timer1"} sortable={true} />
// some other columns
</DataTable>
);
}
}
为什么第一个代码不起作用?