如何解决我无法将数据从服务打印到成角度的飞镖组件
我正在模拟数据,将来将通过API调用此数据。以下是我到目前为止完成的代码。
Dart模型类:
class Main {
final int id;
String date;
String orderID;
String customer;
String answeredBy;
String requestType;
Main(this.id,this.date,this.orderID,this.customer,this.answeredBy,this.requestType);
@override
String toString() =>
'$id: $date: $orderID: $customer: $answeredBy: $requestType';
}
飞镖服务类:
@Injectable()
class MainService {
Future<List<Main>> getAll() async => main_mock_data;
}
模拟数据:
import 'main.dart';
final main_mock_data = <Main>[
Main(1,'12-1-2020','orderID','customer','answeredBy','requestType'),];
app_component.dart
@Component(
selector: 'app-main',styleUrls: ['main_component.css'],templateUrl: 'main_component.html',providers: [ClassProvider(MainService)])
class MainComponent implements OnInit {
final MainService _mainService; // defining private property
List<Main> data;
Main selected;
MainComponent(this._mainService);
Future<void> _getTableData() async {
data = await _mainService.getAll();
}
void ngOnInit() => _getTableData();
}
最后是html文件:
<tbody>
<tr *ngFor="let item of data">
<td>{{item.Date}}</td>
<td>{{item.OrderID}}</td>
<td>{{item.Customer}}</td>
<td>{{item.AnsweredBy}}</td>
<td>{{item.RequestType}}</td>
</tr>
</tbody>
解决方法
当当前窗口中发生某些事件(单击,计时器,xhr调用...)时,Angular将触发更改检测
您可以使用计时器来“模拟”和xhr调用,而不是直接返回模拟数据
Future<List<Main>> getAll() {
return Future.delayed(
Duration(milliseconds: 500),() => main_mock_data,);
}
或者您可以手动触发更改检测。
final ChangeDetectorRef changeDetection;
MainComponent(this._mainService,this.changeDetection);
Future<void> _getTableData() async {
data = await _mainService.getAll();
changeDetection.markForCheck()
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。