The way we're importing Observable in AngularFire doesn't automatically include operators, in order to reduce library size. There are two ways you can add operators to Observable, "auto-patching" or "standalone."
Auto-patching is most common. At the root of your application (or in the module where the operators are used) add this statement for each of the operators you want to be available: import 'rxjs/add/operator/map';. Then you can call .map() on any observable. It's best to do this at the root of your app since it has a global side effect. Note: TypeScript understands the way we're doing patching, and will now know that map is a function on Observable.
The standalone approach is to just import the operator as a function and call it like so:
import {map} from 'rxjs/operator/map';
map.call(af.database.list(ref), (items:any[]) => {...});
This approach gets hairy when you want to chain lots of operators, but has the benefit of not having a global side effect, and can be tree-shaking friendly if the operator is only used in a lazily-loaded module.
Leaving this issue open so this can be better documented.
for me this works:
import {map} from 'rxjs/operator/map';
this.meshes= map.call(af.database.list("/studies/" + this.uid + '/' + this.studykey + '/meshes/'), (vals: any[]) => {
return vals.map((m) => {
m.shapes = af.database.list("/meshes/" + this.uid + '/' + m.$key);
return m;
});
});
and this not:
import 'rxjs/add/operator/map';
this.meshes = af.database.list("/studies/" + this.uid + '/' + this.studykey + '/meshes/').map(vals: any[]) => {
return vals.map((m) => {
m.shapes = af.database.list("/meshes/" + this.uid + '/' + m.$key);
return m;
});
});
error:
ERROR in ./ClientApp/components/editor/editor.ts
(112,107): error TS1005: ',' expected.
ERROR in ./ClientApp/components/editor/editor.ts
(112,116): error TS1005: ';' expected.
ERROR in ./ClientApp/components/editor/editor.ts
(117,10): error TS1128: Declaration or statement expected.
ERROR in ./ClientApp/components/editor/editor.ts
(255,10): error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.
...
How can I update an object in my code snippet from above?
var result = this.meshes.update('/meshes/' + this.uid + '/' + this.activeMeshKey + '/' + this.activeShapeKey+'/', this.activeShape);
error (path is right/exists):
VM9784:27 ORIGINAL EXCEPTION: Error: Firebase.update failed: First argument contains an invalid key ($key) in path /$key. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]"
I can workaround the last error by deleting the $key property and then upate
Most helpful comment
The way we're importing
Observablein AngularFire doesn't automatically include operators, in order to reduce library size. There are two ways you can add operators to Observable, "auto-patching" or "standalone."Auto-patching is most common. At the root of your application (or in the module where the operators are used) add this statement for each of the operators you want to be available:
import 'rxjs/add/operator/map';. Then you can call.map()on any observable. It's best to do this at the root of your app since it has a global side effect. Note: TypeScript understands the way we're doing patching, and will now know thatmapis a function onObservable.The standalone approach is to just import the operator as a function and call it like so:
This approach gets hairy when you want to chain lots of operators, but has the benefit of not having a global side effect, and can be tree-shaking friendly if the operator is only used in a lazily-loaded module.
Leaving this issue open so this can be better documented.