Question

我想将我的组件ImageDetail中的值绑定到像

这样的组件ImageComment

ImageDetailHtml：

<image-comment [photo]="photo"></image-comment>

ImageCommentComponent：

export class ImageCommentComponent {
  @Input('photo') photo: Photo;

并将此值显示在我的ImageCommentHtml中：

  <h3>{{user.userName}}</h3>
  <h4>{{photo.title}}</h4>
  <p>{{photo.description}}</p>

问题是，在构建ImageCommentHtml之后加载了照片的数据而我没有得到这些值。任何想法都可以解释我如何解决这个异步问题？我非常努力，没有任何效果。

以后是否有机会加载子组件？

**更新** 尝试了解决方案：

<image-comment *ngIf="photo" [photo]="photo"></image-comment>

它仍然不起作用。我添加了一些记录器：

  ngAfterViewChecked() {
    console.log("After view checked: " + 'photo', this.photo)
  }

  ngOnInit() {
    console.log("On Init: " + 'photo', this.photo)
  }

结果是：

On Init: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Photo {}
image-comment.component.ts:42 After view checked: photo Object {photoId: 4, photoName: "#love", photoTitle: "me", photoDescription: null, imageName: "Unbenannt.PNG"…}

所以它仍然加载到很晚:( ImageDetailComponent

  //COMPONENTS
    import {Component} from '@angular/core';
    import {Router, ActivatedRoute, Params}    from '@angular/router';
    import {ImageCommentComponent} from './image-comment.component.ts'
    //SERVICES
    import {UserService} from '../services/user.service';
    import {PhotoService} from '../services/photo.service';
    //MODELS
    import {User} from '../models/user.model';
    import {Photo} from '../models/photo.model';
    //SETTINGS
    import {LocalStorageSettings} from '../properties/localstorage.properties';

    @Component({
      selector: 'image-detail',
      templateUrl: 'app/components/image-detail.component.html',
      providers: [PhotoService,UserService]
    })

    export class ImageDetailComponent {
      photo: Photo = new Photo();
      like: string;
      user: User;
      imageUrl: string;



      constructor(
        private photoService: PhotoService,
        private userService: UserService,
        private route: ActivatedRoute
      ) {
        let photoId: any;
        this.route.params.forEach((params: Params) => {
          photoId = +params['id'];
        });
        this.photoService.getPhotoByPhotoId(photoId).subscribe(
          photo => {
            this.photo = JSON.parse(JSON.parse(JSON.stringify(photo))._body);
            this.imageUrl = "http://localhost:8080/images/" + this.photo.imageName;

            this.userService.getUserByName(`${LocalStorageSettings.getLocalUsername}`).subscribe(
              user => {
                this.user = JSON.parse(JSON.parse(JSON.stringify(user))._body);
                if(this.user.likedPhotoList.filter(photo => photo.photoId == this.photo.photoId)[0]) {
                  this.like="Unlike";
                } else {
                  this.like="Like";
                }
              },
              error => console.log(error)
            )
          },
          error => console.log(error)
        )
      }

      goBack() {
        window.history.back();
      }

      likeDisplay() {
        if(this.like == "Like") {
          this.like = "Unlike";
          this.user.likedPhotoList.push(this.photo);
          this.photo.likes+=1;
          this.userService.updateUser(this.user).subscribe();
          this.photoService.updatePhoto(this.photo).subscribe();
        } else {
          this.like = "Like";
          for(let i = 0; i < this.user.likedPhotoList.length; i++) {
            if(this.user.likedPhotoList[i].photoId == this.photo.photoId) {
              this.user.likedPhotoList.splice(i,1);
            }
          }

          this.photo.likes-=1;
          this.userService.updateUser(this.user).subscribe();
          this.photoService.updatePhoto(this.photo).subscribe();
        }
      }
    }

ImageDetailHtml：

<div class="pusher">
  <div class="ui inverted vertical segment">
    <div class="ui text container">
      <div class="center aligned">
        <img src="{{imageUrl}}" class="ui image  centered" />
      </div>
      <br>
      <div class="ui grid">
          <div class="left floated six wide column" style="cursor:pointer; color:grey;">
            <span (click)="goBack()"><i class="long arrow left icon">Back</i> </span>
          </div>
          <div class="left floated ten wide column right aligned" style=" color:grey;">
            <i class="thumbs outline up icon"></i>{{photo.likes}} &nbsp;&nbsp;&nbsp;
            <a style="cursor: pointer" (click)="likeDisplay()">{{like}}</a>
          </div>
      </div>
    </div>
  </div>
</div>
<image-comment *ngIf="photo" [photo]="photo"></image-comment>

ImageCommentComponent：

    //COMPONENTS
import {Component} from '@angular/core';
//MODELS
import {User} from '../models/user.model';
import {Photo} from '../models/photo.model';
// SERVICES
import {UserService} from '../services/user.service';
import {AddPhotoService} from '../services/add-photo.service';
import {UploadPhotoService} from '../services/upload-photo.service';
// SETTINGS
import {LocalStorageSettings} from '../properties/localstorage.properties';

@Component({
  selector: 'add-photo',
  providers: [UploadPhotoService, AddPhotoService],
  templateUrl: 'app/components/add-photo.component.html'
})
export class AddPhotoComponent {
  newPhoto: Photo = new Photo();
  photoAdded: boolean = false;
  user: User;

  constructor (
    private uploadPhotoService: UploadPhotoService,
    private addPhotoService: AddPhotoService,
    private userService: UserService
  ) {}

  onSubmit() {
    var userName: string = localStorage.getItem(`${LocalStorageSettings.LOCAL_STORAGE_USERNAME}`);
    this.userService.getUserByName(userName).subscribe(
      user => {
        this.user = JSON.parse(JSON.parse(JSON.stringify(user))._body);
        console.log(this.user);
        this.newPhoto.user = this.user;
        this.addPhotoService.sendPhoto(this.newPhoto).subscribe(
          data => {
            this.photoAdded = true;
            this.newPhoto = new Photo();
          },
          error => console.log(error)
        )
      },
      error => console.log(error)
    )
  }
}

ImageComponentHtml：

<div class="ui text container">
  <h3>{{user.userName}}</h3>
  <h4>{{photo?.title}}</h4>
  <p>{{photo?.description}}</p>

  <div class="ui comments">
    <h3 class="ui dividing header">Comments</h3>

    <div class="comment" *ngFor="let comment of photo.commentList">
      <div class="ui grid">
        <div class="two wide column">
          <img src="http://localhost:8080/pic/avatar1.png" class="ui image tiny">
          <span class="author">{{photoComment.userName}}</span>
        </div>
        <div class="fourteen wide column">
          <div class="ui blue message">
            <div class="content">
              <div class="text">
                {{photoComment.content}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br>
    <div class="ui grid">
      <div class="two wide column">
        <img src="http://localhost:8080/pic/avatar1.png" class="ui image tiny">
        <span class="author">{{user.userName}}</span>
      </div>
      <div class="fourteen wide column">
        <form class="ui form" (ngSubmit)="onSubmit()" #commentForm="ngForm">
          <div class="field">
            <textarea #words rows="3" placeholder="Add a comment" required [(ngModel)]="photoComment.content" name="photoCommentContent"></textarea>
          </div>
          <button type="submit" class="ui red button">Comment</button>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用*ngIf指令仅在变量ImageCommentComponent收到数据后才加载photo，而不是之前：

<image-comment *ngIf="photo" [photo]="photo"></image-comment>

编辑：

问题在于您ImageDetailComponent - 初始化变量photo：

photo: Photo = new Photo();

你应该只声明它，如下：

photo: Photo;

这样，在photo收到数据之前，undefined的值将为ImageCommentComponent，而photo将不会加载。

异步绑定angular2

1 个答案: