如何将部分字符串数据分配给Angular5中的数组

时间：2018-01-08 13:17:35

标签： angular angular-cli angular5

您好我想将包含json数据的字符串分配给数组。

请参阅屏幕截图中包含的数据。

Data Screenshot

这是我的Retrive Json数据的服务代码。

 import { Injectable } from '@angular/core';
 import {Http,Response,Request,RequestOptions,Headers} from '@angular/http';
 import 'rxjs/RX';
 import { error } from 'util';
 import {product} from './product';
  @Injectable()
 export class SerhttpService {
 data2 = 'if this displays there isan error in link';
 rel = 'jllk';
 pdt:product;
 url:string;
 constructor(private http:Http) { }

  testreq()
   {
    return this.http.get("http://magento.selldesk.io/index.php/rest/V1     /product/24-MB02").subscribe(res => this.data2=res.json());
    }
  }

这是我的组件代码，用于转换和显示Json字符串。

import { Component,Input } from '@angular/core';
import {Http,Response,Request,RequestOptions,Headers} from '@angular/http';
import 'rxjs/RX';
import { error } from 'util';
import { SerhttpService } from './serhttp.service';
import { FormsModule } from '@angular/forms';
import {product} from  './product';
import {FormGroup,FormControl,ReactiveFormsModule,Validators} from  '@angular/forms';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
 import { json } from 'd3';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],

})
export class AppComponent {

  myform: FormGroup;
  title = 'app';

  data1 = 'test';
  link = 'http://magento.selldesk.io/pub/media/catalog/product/';

   test:string[]=[];
   rel='';
   rel1='';
   rel2:number=5;
   pdt:product;
   galleryOptions: NgxGalleryOptions[];
    galleryImages: NgxGalleryImage[];

   constructor(private http:Http,private nhttp:SerhttpService)
   {

    }
    checkser()
     {
     this.data1=this.nhttp.data2;

      }
     ngOnInit()
       {
       this.nhttp.testreq();
       this.http.get("http://magento.selldesk.io/index.php/rest/V1/related/24-MB02").subscribe(res4 => this.rel=res4.json());
       this.myform = new FormGroup({
       nickname : new FormControl('',Validators.required),
       summary: new FormControl('',Validators.required),
         Review: new FormControl('',   [Validators.required,Validators.minLength(6),Validators.maxLength(50)])});

      this.galleryOptions = [
          {
           width: '600px',
           height: '400px',
             thumbnailsColumns: 4,
            imageAnimation: NgxGalleryAnimation.Slide
            },

                {
               breakpoint: 800,
               width: '100%',
                 height: '600px',
               imagePercent: 80,
                thumbnailsPercent: 20,
                thumbnailsMargin: 20,
                thumbnailMargin: 20
               },
// max-width 400
                {
                breakpoint: 400,
                preview: false
                }
                    ];

                 let data4 = JSON.parse(this.nhttp.data2);
                   let newGalleryImages = [];
                   for (const data of data4.media_gallery_entries) {
                   const image = {
                    small: this.link+data.file,
                    medium: this.link+data.file,
                     big: this.link+data.file,
                       }
                      newGalleryImages.push(image);
                           }
                      this.galleryImages = newGalleryImages;


                              }

这是我的Html文件显示内容： 在最后一行我编码显示图像滑块但数据未通过。

<div class="outer">
 <div class="imgdata">
  <div class="limage in">

  <ul id="light-slider" class="gallery list-unstyled cS-hidden">
        <ng-container   *ngFor="let imtest of nhttp.data2.media_gallery_entries">
    <li [attr.data-thumb]="link+imtest.file" [attr.test1]="link+imtest.file"> 
        <img [src]="link+imtest.file" class="mainimg"/>
         </li>
        </ng-container> 
</ul>
</div>
<div class="data in">
    <div class="productname">{{nhttp.data2.name}}</div><br>
    <div  class="reviewlink"><a href="" style="text-decoration:none;">Be The First One To Review This Product</a></div>
    <div class="pricedetails_availability">
        <div class="price ln "><strong>{{nhttp.data2.price | number:'2.2' | currency:''}}</strong></div>
        <div class="availability ln">
            <ul class="tright" type="none">
                <li><span class="stock clr">In Stock</span></li>
                <li><span class="sku clr">SKU# &nbsp;{{+nhttp.data2.sku}}</span></li>
            </ul>
        </div>
    </div>
    <div class="qty">
        <form>
            <div class="qtytext clr">Qty</div><br>
            <input type="number" name="quantity" class="quan clr" value="1"><br>
            <input type="submit" name="addtocart" value="Add To Cart" class="cbtn">
         </form>

         </div>
          <div class="oplist">
        <ul type="none">
            <li class="wlist"><i class="fa fa-heart"></i>&nbsp;ADD TO WISH LIST</li>
            <li class="wlist"> <i class="fa fa-bar-chart-o"></i>&nbsp;ADD TO COMPARE </li>
            <li class="wlist"><i class="fa fa-envelope"></i>&nbsp;EMAIL</li>
        </ul>
    </div>
      </div>
       </div>
     <div class="small" >
          <div  class="smallimg" *ngFor="let post of nhttp.data2.media_gallery_entries">
            <img [src]="link+post.file" class="smimg"/>   
           </div>     
           </div>
          <div class="tabcontent">
             <mat-tab-group class="demo-tab-group">

            <mat-tab label="Tab 1">
              <ng-template mat-tab-label class="ttl clr">
                    {{nhttp.data2.custom_attributes[3].attribute_code}}
              </ng-template>
              <div class="demo-tab-content clr" [innerHTML]="nhttp.data2.custom_attributes[3].value" >
                  <!--  {{nhttp.data2.custom_attributes[3].value}} -->
              </div>  
            </mat-tab>
            <mat-tab label="Tab 2">
                    <ng-template mat-tab-label class="ttl clr">
                    More Information
                    </ng-template>
                    <div class="demo-tab-content">
                <table>
                <ng-container   *ngFor="let info of nhttp.data2.custom_attributes[1].value" class="dt">
                      <tr><td> <span class="title clr">{{info.label}} </span> </td><td><span class="dat clr">{{info.value}}</span> </td> </tr> 
                      <tr><td></td><td></td></tr>
                </ng-container>  
                </table>
                    </div>  
                  </mat-tab>
                  <mat-tab label="Tab 3">
                        <ng-template mat-tab-label class="ttl clr">
                        Reviews
                        </ng-template>
                        <div class="demo-tab-content">
                     <div class="ttl1 clr">   Your'e Reviewing: <br>

                        <div class="rname clr"><strong>{{nhttp.data2.name}}</strong></div></div>


                        <form [formGroup]="myform" novalidate class="rfm">
                            <div class="form-group">
                                <label class="rme clr">Nickname <span class="star">*</span></label><br>&nbsp;<br>
                                <input type="text" class="form-control txt" formControlName="nickname">
                            </div>
                            <div class="form-group">
                                    <label class="rme clr">Summary <span class="star">*</span></label><br>&nbsp;<br>
                                    <input type="text" class="form-control txt" formControlName="summary">
                                </div>
                                <div class="form-group">
                                        <label class="rme clr">Review <span class="star">*</span></label><br>&nbsp;<br>

                                        <textarea rows="4" cols="55" class="form-control txta" formControlName="Review"></textarea>
                                    </div>
                                    <div class="form-group">

                                            <input type="submit" class="form-control rsub" value="Submit Review">
                                        </div> 
                        </form>
                     <!--   {{myform.value|json}} -->
                        </div>  
                      </mat-tab>

          </mat-tab-group>
    </div>
    &nbsp;<br>
    <span class="rtitle"><strong>Related Products</strong></span>
    <p>Check items to add to the cart or <a href=""> select all </a></p>
      <div class="rproducts">

        <div class="rproduct"  *ngFor="let rp of rel[0].related_produts">
        <img [src]="rp.image_url" class="rimg"/> <br>
                      <input type="checkbox" /><span class="rname"   [innerHtml]="rp.related_product_name"></span><br>
                &nbsp;<br>

             <strong class="rprice1"><span class="rprice"  [innerHtml]="rp.related_product_price | number:'2.2' | currency:''"></span></strong><br>
             &nbsp;<br>
          <div class="icn"> <i class="fa fa-heart"></i>   <i class="fa fa-bar-chart-o"></i>   </div>


   <div class="testngx">
    <ngx-gallery [options]="galleryOptions" [images]="galleryImages">         </ngx-gallery>
   </div>
     {{data4|json}}
   </div>

请帮我解决问题。

提前致谢。

0 个答案:

没有答案
相关问题
最新问题