如何将图像连接到数组并在Angular的滑块中显示它们

Question

我正在使用Angular项目，并且添加了ngx编辑器，并在其中添加了图像和文本。我已经将图像与来自数据库的字符串分开了，我想在滑块中显示它们。

这是我的 blog.component.ts ：

import { Component, OnInit, Input } from '@angular/core';
import { UserService } from '../_services';
import { User } from '../_models/user'
import { Subscription } from 'rxjs';
import { first } from 'rxjs/operators'
import { AuthenticationServiceService } from '../_services';
@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
  usersBlog: User[] = [];
  msg: string = null;
  m: any = [];
  src: any = [];
  public imagesUrl;

  constructor(private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }

  ngOnInit() {

    this.getBlog();

    for (var imsgeSrc in this.src) {
    this.imagesUrl = this.usersBlog[imsgeSrc];
     console.log("fhfhfh:",this.imagesUrl);
    }

  }

  getBlog() {
    this.userService.getBlog().pipe(first()).subscribe(usersBlog => {
      this.usersBlog = usersBlog;

      for (var i in this.usersBlog) {

        var patt1 = /<img(.*?)>/g;
        this.m = String(this.usersBlog[i].blog).match(patt1);
        for (var k in this.m) {
          this.src = $(this.m[k]).attr('src');
          console.log('imsg:', this.src); <!-- I am fetching the src of the images. -->
        }
      }
    });
  }
}

在这段代码中，我分离了图像的src，但是问题是，由于无法将它们作为数组连接，所以它没有显示在滑块上。

这是我的 blog.component.html ：

<angular-image-slider [images]="imagesUrl"></angular-image-slider>

由于未获取imagesUrl，因此未在滑块中显示图像。

这是由于console.log('imsg:', this.src);

但是问题是，我无法将图像设置为数组并将其显示为html：

 ngOnInit() {

    this.getBlog();

    for (var imsgeSrc in this.src) {
    this.imagesUrl = this.usersBlog[imsgeSrc];
     console.log("fhfhfh:",this.imagesUrl);
    }

  }

非常感谢您的帮助。

Answer 1

如果要将图像URL存储在for循环中，则可以声明一个数组并向其中添加一个项，如：

blog.component.ts:

images: any[] = []; // array like this

getBlog() {
    this.userService.getBlog().pipe(first()).subscribe(usersBlog => {
      this.usersBlog = usersBlog;
      for (var i in this.usersBlog) {
        var patt1 = /<img(.*?)>/g;
        this.m = String(this.usersBlog[i].blog).match(patt1);
        for (var k in this.m) {
          var src = $(this.m[k]).attr('src');
          this.images.push(src) // Here add image url in array
        }
        console.log(this.images) /// your all images to pass as an array
      }
    });
}

对于HTML部分：

<div *ngFor="let url of images">
  <angular-image-slider [images]="url"></angular-image-slider>
</div>