Необходимо получить значения из цикла и добавить текст поверх изображения - PullRequest
Новая
       9

Необходимо получить значения из цикла и добавить текст поверх изображения

0 голосов
/ 18 сентября 2018

Я получаю JSON в качестве ответа, как показано ниже, 

[{
    "id": 1,
    "PageNumber": 1,
    "Image": "https://im.idiva.com/content/2015/Dec/card_final.jpg",
    "PageTexts": [{
        "id": 2,
        "pagetextText": "मैं अच्छा हूँ",
        "pagetextX": "780",
        "pagetextY": "890",
        "pagetextHeight": 67,
        "pagetextWidth": 70
      },
      {
        "id": 1,
        "pagetextText": "हैलो नासीर, आप कैसे हैं",
        "pagetextX": "679",
        "pagetextY": "689",
        "pagetextHeight": 45,
        "pagetextWidth": 50
      }
    ]
  },
  {
    "id": 2,
    "PageNumber": 2,
    "PageImage": "https://www.safetykart.com/img/cms/Menstrupedia-Your-Guide-to-healthy-periods.png",
    "PageTexts": [{
      "id": 3,
      "pagetextText": "तुमने इस शहर को क्यों छोड़ा?",
      "pagetextX": "908",
      "pagetextY": "976",
      "pagetextHeight": 67,
      "pagetextWidth": 90
    }]
  },
  {
    "id": 3,
    "PageNumber": 3,
    "PageImage": "https://im.idiva.com/content/2015/Dec/card_final.jpg",
    "PageTexts": []
  }
]

Здесь, в JSON, у меня есть PageNumber и уважаемые изображения и тексты.

Для страницы № 1 она имеет 2-страничный текст, и мне нужно добавить этот текст поверх номера страницы: 1 уважаемое изображение и, нажав nab-carousel, щелкнуть на следующем изображении, мне нужно изменить изображение и добавить номер страницы: 2 текст на этом уважаемом изображении.

вот мой код, 

this.langtext = JSON.stringify(this.langtext);
console.log(this.langtext);

this.langtext = JSON.parse(this.langtext);
this.games = "";
console.log("=====this.langtext=====");
console.log(this.langtext);
$(".show_me").toggle();
$(".show_me").show();
this.mainimg = false;
this.langtext.forEach(function(value) {

  var $map = jQuery('#img_map');
  var x = '';
  var y = '';
  var h = '';
  var w = '';
  var text = '';
  value.PageTexts.forEach(function(data) {
    x = data.pagetextX;
    y = data.pagetextY;
    h = data.pagetextHeight;
    w = data.pagetextWidth;
    text = data.pagetextText;
    var $point = jQuery('<p class="point">' + text + '</p>').css({
      top: y + 'px',
      left: x + 'px',
      position: 'absolute';background: '#fff';height: h + 'px';width: w + 'px'
    });
    $map.append($point);
  });
});

console.log("=-=-=-=translatedData=-=-=-");
console.log(this.translatedData);

мой HTML: 

<ngb-carousel [hideNavigationArrows]="hideNavigationArrows" [interval]="0">
  <ng-template ngbSlide *ngFor="let image of langtext ; let i = index">
    <div class="" style="text-align:center">
      <div id="img_map" class="col-xs-12 col-md-12 col-lg-12 col-sm-12">
        <img class="img-fluid" src="{{image.PageImage}}">
        <span>{{image.title_name}}</span>
      </div>
    </div>
  </ng-template>
</ngb-carousel>

Мне нужно добавить текст поверх изображения, и мне нужно перебрать ng-for, и мне нужно добавить тексты для этого конкретного изображения.

Но я получаю только один текст для всех изображений в карусели, но в консоли отображается 3. Пожалуйста, подскажите, как мне этого добиться.

...