类型错误：无法读取波形库中未定义的属性（读取“nativeElement”）

Question

这是我的代码，显示错误

即创建波形，但波形不是创建函数。

 startRecording() {
    this.mediaSectionVisible = false;
    if (!this.isRecording) {
      this.isRecording = true;
      navigator.mediaDevices
      .getUserMedia({ audio: true })
      .then((stream) => {
        this.isRecording = true;
        this.mediaRecorder = new MediaRecorder(stream);
        this.mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            this.audioChunks.push(event.data);
          }
        };
        this.mediaRecorder.onstop = () => {
          this.isRecording = false;
          this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
          this.audioChunks = [];
          clearInterval(this.recordingTimer);
          this.convertBlobToBase64(this.audioBlob);
          this.displayWaveform(this.audioBlob);
          };
          this.mediaRecorder.start();
          this.recognition.start();
          this.recordingTime = 0;
          this.recordingTimer = setInterval(() => {
            this.ngZone.run(() => {
              this.recordingTime++;
              this.cdr.detectChanges();
            });
          }, 1000);
          
          this.cdr.detectChanges();

          if (this.wavesurfer) {
            this.wavesurfer.destroy();
            this.cdr.detectChanges();

          }
          this.cdr.detectChanges();

          this.wavesurfer = WaveSurfer.create({
            container: this.waveformElement.nativeElement as HTMLElement,
            waveColor: '#E7E7E7',
            progressColor: '#222021',
            cursorColor: '#ffffff',
            height: 55,
            barWidth: 8,
            barGap: 3,
            barRadius: 30,
            autoScroll: true,
            autoCenter: true,
            autoplay: false,
          });

          this.wavesurfer.once('interaction', () => {
            this.wavesurfer?.play();
            this.cdr.detectChanges()
          });
          // console.log('audioBlob....', this.audioBlob);
          if (this.audioBlob !== null) {
            this.displayWaveform(this.audioBlob);
          }
        })
        .catch((error) => {
          this.notifyService.showError('internal error abc:', '');
          console.log(error);
        });
    }
  }

这是html代码

<div class="section-container" *ngIf="audioSectionVisible">
    <div class="width-container">
        <div class="d-flex justify-content-between">
            <p class="upload-text">RECORDING ADDED</p>
            <button class="bg-transparent" *ngIf="isRecording && !blobUrl" (click)="hideSection(); clearRecordedData()">
                <img src="./assets/images/cross-icon.svg" alt="Delete Selected Image" width="20px" height="20px">
            </button>
        </div>
        <div>
            <div class="waveform" #waveform></div>
        </div>
        <div class="d-flex align-items-center">
            <button class="media-btn me-3" (click)="playAudio()">
                <img src="./assets/images/pause-audio.svg" *ngIf="isPlaying" width="20px" height="20px">
                <img src="./assets/images/play-audio.svg" *ngIf="!isPlaying">
            </button>
            <div class="upload-text d-flex w-100 justify-content-between" *ngIf="isRecording && !blobUrl">
                <p>RECORDING</p>
                <p>{{recordedTime}}</p>
            </div>
        </div>
    </div>
</div>

我正在存储录音声音，声音存储在波形中，而波形不显示，代码直接抛出错误并捕获。波形显示，但第一次单击显示错误，第二次单击后显示波形后显示新语音，那么如何修复错误。

Answer 1

解决这个错误。错误显示是因为我在 html 中使用 *ngIf="audioSectionVisible" 。我在代码工作后使用 [ngClass]="audioSectionVisible ? 'show-div' : 'hide-div'" 。 *ngIf 是块 DOM，所以大多数使用 [ngclass] = abc ？真假 并使用三元运算....