遍历BehaviorSubject模板层的值

时间:2018-08-12 10:51:50

标签: angular typescript rxjs observable behaviorsubject

我在显示数据时遇到问题,这是我的BehaviorSubject。我已经看到了带有asyncpipe的BehaviorSubject的这种迭代,该异步订阅了Observable

服务

todo.service.ts

@Injectable()
export class TodoService {

todos$: BehaviorSubject<Todo[]> = new BehaviorSubject<Todo[]>( [] ) ;

readonly todoEndPoint = environment.endpoint + "todos"

constructor( private $http: HttpClient) {}

getAllTodos(): Observable<Todo[]>{
return this.$http.get<Todo[]>( this.todoEndPoint )
    .pipe(
      tap( val => this.todos$.next( val ))
    )
}
}

我希望它在哪里使用

export class TodoListComponent implements OnInit {

constructor( public $todo: TodoService ) {
  $todo.getAllTodos().subscribe()
}

ngOnInit() {
}

}

模板层

<div *ngFor="let todo of $todo.todos$ | async">
  {{ todo.text }}
</div>

-------------------------------------------------- -----------编辑-------------------------------------- ---------------------------- 我收到此错误

  

错误错误:尝试与'[object Object]'进行比较时出错。仅允许数组和可迭代对象

是否有可能遍历BehaviorSubject的数据流

-------------------------------------------------- -----------解决方案-------------------------------------- ------------------- 我的后端发送了一个不是Array的对象。那是现在改变对数组的响应的问题了

2 个答案:

答案 0 :(得分:0)

在使用中:

@Injectable()
export class TodoService {

readonly todoEndPoint = environment.endpoint + "todos"

constructor( private $http: HttpClient) {}

getAllTodos(): Observable<Todo[]>{
return this.$http.get<Todo[]>( this.todoEndPoint );
}
}

在组件中:

export class TodoListComponent implements OnInit {

public todoitems$: Observable<Todo[]>;

constructor( private $todo: TodoService ) {
}

ngOnInit() {
     this.todoitems$ = this.$todo.getAllTodos();
}

}

在模板中:

<div *ngFor="let todo of todoitems$ | async">
  {{ todo.text }}
</div>

答案 1 :(得分:0)

TS:

服务:

public void uploadImageFile() {
    CustomLog.logI("start of uploadImageFile");

    setIDToken();
}

private void setIDToken() {
    FirebaseUser mUser = FirebaseAuth.getInstance().getCurrentUser();
    // To get ID Token of the user authenticated by google authentication
    mUser.getIdToken(true)
            .addOnCompleteListener(new OnCompleteListener<GetTokenResult>() {
                public void onComplete (@NonNull Task< GetTokenResult > task) {
                    if (task.isSuccessful()) {
                        // Token information is set to mIDToken of the global variable
                        mIDToken = task.getResult().getToken();
                        AsyncTaskForAssumeRole asyncTaskForAssumeRole = new AsyncTaskForAssumeRole();
                        asyncTaskForAssumeRole.execute();
                    } else {
                        CustomLog.logE(task.getException().getMessage());
                    }
                }
            });
}

public class AsyncTaskForAssumeRole extends AsyncTask<Void, Void, BasicSessionCredentials> {

    protected BasicSessionCredentials doInBackground(Void... params) {
        try {
            // set credentials from AssumeRoleWithWebIdentity
            BasicSessionCredentials credentials = setAssumeRoleWithWebIdentity();
            return credentials;
        } catch (Exception e) {
            CustomLog.logE(e.getMessage());
            return null;
        }
    }

    protected void onPostExecute(BasicSessionCredentials credentials) {

        // upload file with S3 connection
        connectToS3ForUpload(credentials);

    }
}

private BasicSessionCredentials setAssumeRoleWithWebIdentity(){
    CustomLog.logD("start of setAssumeRoleWithWebIdentity");
    String ROLE_ARN = [my role arn];
    // set AssumeRoleWithWebIdentity request with created policy and token information retrieved through Google Sign in information
    AssumeRoleWithWebIdentityRequest request = new AssumeRoleWithWebIdentityRequest()
            .withWebIdentityToken(mIDToken)
            .withRoleArn(ROLE_ARN)
            .withRoleSessionName("wifsession");

    BasicAWSCredentials basicCreds = new BasicAWSCredentials("", "");
    AWSSecurityTokenServiceClient sts = new AWSSecurityTokenServiceClient(basicCreds);
    AssumeRoleWithWebIdentityResult result = sts.assumeRoleWithWebIdentity(request);

    Credentials stsCredentials = result.getCredentials();
    String subjectFromWIF = result.getSubjectFromWebIdentityToken();
    BasicSessionCredentials credentials = new BasicSessionCredentials(stsCredentials.getAccessKeyId(),
            stsCredentials.getSecretAccessKey(),
            stsCredentials.getSessionToken());

    return credentials;
}

组件:

getAllTodos(): Observable<Todo[]>{
return this.$http.get<Todo[]>( this.todoEndPoint );
}

HTML:

export class TodoListComponent implements OnInit {

//todos as observable.
public todos: Observable<Todo[]>;

constructor( private $todo: TodoService ) {
}

ngOnInit() {
     this.todos = this.$todo.getAllTodos();
}

}