angular 形式值 {} 在 ts 文件中是 null 但在 html 中有效

Question

我想要的只是讓值顯示在 ts 文件中。 我有一個名為“listform”的父組件-> childComp“singlecontrol”。 'singlecontrol' tsfile 中的所有值都有效，除非我的圖像值進入它返回 null。 幾個星期以來，我一直對這個問題感到非常困惑。

單控 ts

import { Component, OnInit, Input, HostListener, AfterViewChecked,ViewChild, AfterViewInit ,ElementRef, Renderer2, OnChanges, Output, EventEmitter ,ChangeDetectionStrategy} from '@angular/core';
import { FormControl, FormArray, FormBuilder, FormGroup, ReactiveFormsModule, ValidationErrors, ValidatorFn, FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, AbstractControl } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { BehaviorSubject, Subscription } from 'rxjs';
import { customValidators } from '../../formfieldbuilder/customvalidators';


@Component({
  selector: 'app-singlecontrol',
  templateUrl: './singlecontrol.component.html',
  styleUrls: ['./singlecontrol.component.scss']
})
export class SinglecontrolComponent implements OnInit {
  @Input() data: any;
  @Input() control: FormGroup;
  public controlEnd:any;
  @Input() errorsfile: any;
  @Input() auth: any;
  public image="null"
  public status:any;
  constructor( ) {

// this.control.statusChanges.subscribe((info) => {
//   console.log(info)
//   this.status = info;
//   console.log(status)
// })
   }




  ngOnInit() {
//console.log(errors)
 this.status =this.control.get(this.data.name).status
 this.controlEnd =  this.control.get(this.data.name)

 console.log(this.controlEnd)
 console.log(this.controlEnd.value)
 console.log(this.controlEnd.value)
}






  onImagePicksinglecontrol(e, cardname, controlpick) {

    const file = (e.target).files[0]
    console.log(e.target)
console.log("file")
console.log(file)
    const reader = new FileReader();
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      var img:any = new Image;
      var url = e.target.result;
       img.src = e.target.result;
       console.log(reader.result)
       this.image =reader.result
       console.log("image")
       console.log(this.image)
       var keyexist = false
        img.onload = function() {
          console.log(img.width)
          console.log(img.width)
          console.log(img.width)
          console.log(img.width)
          console.log(file.name)
          console.log(file.size)
          console.log(file.type)
            var ob = {"64bit":reader.result,"image_structure":{"width":img.width,"height":img.height,"filename":file.name,"filesize":file.size,"filetype":file.type}}
          //set value to this ob
                  controlpick.parent.patchValue({ [cardname]: ob })
                  console.log("CONTROLPICK")
                  console.log(controlpick)

                  controlpick.parent.updateValueAndValidity();
    }


    }

    // this.control.get(this.data.name).patchValue()

    // controlpick.parent.patchValue({ [cardname]: file })
    // controlpick.parent.updateValueAndValidity();
    console.log(this.control)
console.log(this.image)

  }

}

我的圖像的 this.controlEnd 值 object = null 應該是 {}，controlEnd 控件的 rest 不是 Z37A6259CC0489DFF02

Answer 1

顯然，在輸入（）中移動數據時，它沒有加載 ts 文件中的值。 在 onInit() 中，我訂閱了值以使組件更新為最新的值和狀態。

   arrayitem[field].statusChanges.subscribe(s=>{
     console.log(s)
     this.status = i[this.data.name].status
     try{
       this.status = s}catch{
       console.log("NO IMAGE");
     }
 
   })
   cont.valueChanges.subscribe(i=>{
   console.log(i)
   console.log(i[this.data.name])
     this.status = i[this.data.name].status
    try{this.images.push( i[this.data.name].path)}catch{console.log("NO IMAGE")}
    console.log(this.images)
 
  })