我有一个带有其模板文件的angular 2组件,如下所述:
Test.Component.ts:
import { Component, Input, NgZone, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import { SampleService, Article, TrackData } from '../../../core';
import { TestService } from '../../shared/social-sharing.service';
@Component({
selector: 'app-social-sharing',
templateUrl: './social-sharing.component.html',
styleUrls: ['./social-sharing.component.less']
})
export class TestComponent implements OnInit {
socialSharing: Array<any>;
constructor(private zone: NgZone,
private Service1: TestService,
private Service2: SampleService) {}
ngOnInit() {
this.setMethod();
}
public setMethod() {
this.socialSharing = [{
containerId: 'social-sharing-preview',
showLabel: false,
socials: ['linkedin', 'twitter']
}];
}
}
Test.Component.html:
<div *ngFor="let social of socialSharing.socials; let i = index;">
<div class="gig-button-container gig-button-container-{{social}}">
<div id="social-sharing-preview-reaction{{i}}" class="gig-button-up" title="" alt="">
<button [attr.data-social]="social"
class="social-sharing-btn {{socialSharing.showLabel}} ? with-label : ''"
(click)="socialShare(social)">
<span class="icon icon_{{social}}"></span>
<span style="font-size:13px;">{{socialSharing.showLabel}}?"Share on
{{social}} | translate":""</span>
</button>
</div>
</div>
</div>
在编译项目时,出现如下错误:
“ any []”类型上不存在“社交”属性
任何人都可以通过提供指导来解决此问题来帮助我
答案 0 :(得分:0)
以下代码解决了该问题:
<div id="test">
<div *ngFor="let item of socialSharing">
<div *ngFor="let social of item.socials; let i = index;">
<div class="gig-button-container gig-button-container-{{social[i]}}">
<div id="social-sharing-preview-reaction{{i}}" class="gig-button-up" title="" alt="">
<button [attr.data-social]="social[i]" class="social-sharing-btn {{item.showLabel}} ? with-label : ''"
(click)="socialShare(social[i])">
<span class="icon icon_{{social[i]}}"></span>
<span style="font-size:13px;">{{item.showLabel}}?"Share on
{{social[i]}} | translate":""</span>
</button>
</div>
</div>
</div>
</div>
</div>