Question

我正在使用Angular 9，并且我有以下代码：

app.component.html

class ConnectDeviceActivity : AppCompatActivity() {

    private lateinit var binding: ActivityConnectDeviceBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_connect_device)
        binding.lifecycleOwner = this     
    }

    override fun onStart() {
        super.onStart()
        // below line prevents UI rendering unless called in new thread eg Thread(Runnable {})
        while( !checkPermissions()) {sleep(2000L)}
        // now we can do other stuff like connect to the device here.
    }

    private fun checkPermissions(): Boolean {
        when {
            !(PermissionChecker.checkSelfPermission(this,
                Manifest.permission.ACCESS_COARSE_LOCATION) == PermissionChecker.PERMISSION_GRANTED) -> {
                Log.i(TAG, "permission ACCESS_COARSE_LOCATION")
                displayRationale(getString(R.string.permission_access_coarse_location))
                return false
            }
            // other permissions omitted for brevity
        }
        return true
    }

    private fun displayRationale(permissionString: String) {
        Log.i(TAG, "Displaying permission rationale...")
        var alertBuilder = AlertDialog.Builder(this)
            .setMessage(permissionString)
            .setNegativeButton("Exit") { _, _ -> moveTaskToBack(true); exitProcess(-1)}
        when(permissionString) {
            getString(R.string.permission_access_coarse_location) -> {
                Log.i(TAG, getString(R.string.permission_access_coarse_location))
                alertBuilder.setPositiveButton("Fix issue") { _, _ -> // create onclick function
                    ActivityCompat.requestPermissions(this,
                        arrayOf(Manifest.permission.ACCESS_COARSE_LOCATION),
                        PERMISSION_ACCESS_COARSE_LOCATION)
                }
            }
        }
        Log.i(TAG, "Going to show alert")
        alertBuilder.create().show()
        Log.i(TAG, "Alert has been shown")
    }
}

然后在我的app.component.ts中

<br><br>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">

      <input #cmd />
      <button (click)="runCommand2(cmd.value)">runCommand</button>
      <br><br>


      RESULT: {{ output }}


    </div>
  </div>
</div>

我还想提到由于某种原因，如果我再次调用该方法，则尽管有数据，但第二次将在视图上填充输出，但第一次不会在视图上填充输出。对问题可能有什么想法？

Answer 1

不确定为什么未首次触发更改检测。尝试使用detectChanges()方法手动触发它。

import { Component, ChangeDetectorRef } from '@angular/core';

export class AppComponent {
  output: any;

  constructor(private myService: myService, private changeDetectorRef: ChangeDetectorRef) { }

  runCommand2(command) {
    this.myService.executeShell2(command).pipe(take(1)).subscribe(     // <-- use `take(1)` to complete after one notification
      response => {
        if (response) { 
          this.output = response;
          console.log(this.output); // This appears in the console but does not appear in {{ output }} although the data is there
        }
      },
      error => {
        this.output = error;
      },
      () => {
        this.changeDetectorRef.detectChanges();    // <-- trigger change detection here
      }
    );
  }
}

角度数据显示在console.log上，但不在组件视图中

1 个答案: