我有一个应用程序，它所做的只是咨询API并检索对象列表。每个对象都很简单，它有一个标题、一个描述和另一个包含ID的数组。
这些ID允许我在另一个API端点中查询该对象在页面上显示时应该具有的映像。事实证明，它是更快地获得文本比图像，因此在我的间隔文本之前改变，并在几秒钟后的图像，我需要这同时发生。如何使文本与图像同时显示？
我是这种语言的新手，我致力于后端，但我被分配了这个任务，所以很可能我没有表达自己或做得很好，但我会感谢你的帮助来实现这个行为。我给你留下了一些我的代码片段，希望能帮助你更好地理解我的查询。
这是我的HTML文件。
<body ng-controller="ControladorAPI">
<div class="fullscreen-container">
<img ng-src="{{imagenActiva}}" alt="Cargando Presentaciones..." class="fullscreen-image">
<div class="content-container">
<h1> {{presentaciones[I].TituloPresentacion}}</h1>
<p>{{presentaciones[I].DescCorta}}</p>
</div>
</div>字符串
这是我的脚本（使用AngularJS）文件
$scope.cancelarTempo = function () {
$interval.cancel(temporizador);
temporizador = null;
}
$scope.scrollear = function () {
if ($scope.I === $scope.presentaciones.length - 1) {
//Cancelo el timer
$scope.cancelarTempo();
//Obtengo nuevamente los datos (esto reactiva el tempo solo)
getDatos();
$scope.I = 0;
}
if ($scope.presentaciones.length !== 0) {
$scope.I = ($scope.I + 1) % $scope.presentaciones.length;
//Obtengo la imagen que deberia ir en el fondo
$scope.IdImagenActual = $scope.presentaciones[$scope.I].Imagenes[0].IdImagen;
getImagen($scope.IdImagenActual);
} else {
$scope.I = 0;
}
}
function getDatos() {
$scope.presentaciones = [];
$http.get(baseURL + "/api/articulos/presentaciones")
.then(function (response) {
//Aca trabajo la respuesta de la consulta
$scope.presentaciones = response.data.Presentaciones;
console.log('Datos obtenidos');
if (temporizador === null) {
$scope.IdImagenActual = $scope.presentaciones[$scope.I].Imagenes[0].IdImagen;
getImagen($scope.IdImagenActual);
temporizador = $interval(function () {
$scope.scrollear();
}.bind(this), 15000);
}
})
.catch(function (error) {
//Manejar los errores desde aca
console.error(error);
});
};
function getImagen(idImagen) {
$http.get(baseURL + "/api/articulos/imagen/" + idImagen, { responseType: 'arraybuffer' })
.then(function (response) {
var arrayBufferView = new Uint8Array(response.data);
var blob = new Blob([arrayBufferView], { type: 'image/png' });
var urlCreator = window.URL || window.webkitURL;
vm.Imagen = urlCreator.createObjectURL(blob);
$scope.imagenActiva = vm.Imagen;
})
}型
正如您所看到的，我们的目标是让页面自动地、无限地滚动我从API获得的列表。我不需要更多的东西。
1条答案
按热度按时间xjreopfe1#
为了让它同时改变，我只需要在获得图像后增加对象数组索引。