1
그래서 내 갤러리에서 새로 선택한 이미지를로드하기 전에 이전에 열었던 이미지가 처음 나타나는 팝업 4와 결합 된 부트 스트랩 모달에 상당히 이상한 효과가 나타났습니다. 그 이유는 내 세부 사항 변수가 이전 (클릭) 이벤트의 이전 값으로 채워지 기 때문입니다. 내 콘솔 로그에서이를 확인할 수 있습니다. 내 질문에 내 변수를 새 값으로 제공하기 전에 내 getArtworkDetail() 메서드에서이 변수를 어떻게 재설정합니까? 렌더링하기 전에 각도 2/4로 변수 재설정하기 부트 스트랩 모달
나는this.details = undefined;
또는
this.details = null;
index.component.html
<!--SEARCH-->
<div class="input-group">
<input #myInput
[(ngModel)]="searchTerm"
type="text"
class="form-control"
placeholder="Search artist or artwork..."
(keyup.enter)="search()"/>
<span class="input-group-btn">
<button #myBtn
(click)="search()"
class="btn btn-default"
type="button">Go!
</button>
</span>
</div>
<!--INDEX-->
<div class="row"
*ngIf="hasArtPieces">
<div *ngFor="let artwork of artworks"
class="col-md-3 col-xs-12 centered">
<div class="card">
<a (click)="getArtworkDetail(artwork.id)"
data-toggle="modal"
data-target="#myModal">
<img class="img-fluid thumb-img"
src="{{artwork.url}}"
alt="Thumbnail">
</a>
<div class="card-block">
<p style="text-align: center"
*ngIf="artwork.title.length < 20; then show else hide">
</p>
<ng-template #show>{{artwork.title }}</ng-template>
<ng-template #hide>{{artwork.title.substring(0,20)}}...</ng-template>
</div>
</div>
<br>
</div>
</div>
<!--DETAIL-->
<div *ngIf="details"
class="modal fade"
id="myModal" tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog"
role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1>{{details.title}}</h1>
<h3>{{details.artist}}</h3>
<img class="img-fluid" src="{{details.url}}"
alt=""><br><br>
<p>{{details.description}}</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>
index.component.ts 당신이 일어나고있는 것으로 보인다 무엇
// imports emitted
@Component({
selector: 'artwork-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
artworks: ArtworkModel[];
searchTerm: string;
details: ArtworkDetailModel;
hasArtPieces = false;
constructor(private detailService: ArtworkDetailsService, private artworksService: ArtworksService) {
}
search() {
if (this.searchTerm) {
this.searchArtworks(this.searchTerm);
}
}
searchArtworks(keyword) {
this.artworksService.searchArtworks(keyword)
.subscribe((artworkData: ArtworkModel[]) => {
this.artworks = artworkData;
this.hasArtPieces = true;
}, err => console.log(err),
() => console.log('Getting artworks complete...'));
}
getArtworkDetail(id) {
this.detailService.getArtworkDetail(id)
.subscribe((detailData: ArtworkDetailModel) => {
this.details = detailData;
}, err => console.log(err),
() => console.log('Getting details complete...'));
}
ngOnInit() {
this.searchArtworks('Rembrandt');
}
}
감사합니다. 이것은 내 문제를 해결 :) –