I can't access the properties of my Firestore document during string Interpolation. The regular JSON output works fine though. Here's the code:
Working
<h3>{{ teacher | async | json }}</h3>
Output:
Not working
<h3>{{ teacher.name | async | json }}</h3>
and
<h3>{{ teacher.name | async }}</h3>
Output:
Typescript code
interface Teacher {
name: string;
}
teacherDoc: AngularFirestoreDocument<Teacher>;
teacher: Observable<Teacher>;
var placeToSearch = 'Teachers/'+this.selectedTeacher;
this.teacherDoc = this.afs.doc(placeToSearch);
this.teacher = this.teacherDoc.valueChanges();
You're just slightly off with the async pipe. The object needs to be unwrapped first, then you call it's properties. It should look like:
{{ (teacher | async)?.name }}
Or better yet, set a template variable to avoid using the async pipe over and over:
<div *ngIf="teacher | async as t">
{{ t.name }}
{{ t.field }}
{{ t.whatever }}
</div>
Your interface should have both name and field
interface Teacher {
name: string;
field: string;
}
<h3>{{ teacher?.name | async }}</h3>
Related
I am trying to display the currency name or key like "USD", "AUD", "EUR" with their respective "last" and "buy" properties from this HTTP response:
and I just get back a list of "key" strings like this
but I can't figure out why my "key" is being returned as a string here.
It's making it difficult for me to programmatically access the properties for each currency
this is my dashboard.component.ts
prices;
bitcoinOwned;
ngOnInit(): void {
this.data.getPrice()
.pipe(map(result => {this.prices = result, console.log("result", result)
for (let key in result) {console.log( key)}
} ))
.subscribe();
}
my data.service
getPrice() {
var url = "https://blockchain.info/ticker";
return this.http.get(url);
}
and my template
<div>
{{ prices |json }}
</div>
<div>
USD last: {{ prices?.USD.last |json }} USD sell: {{ prices?.USD.sell |json }}
</div>
I can access the properties when I do it manually for each key like this but I need to iterate over the keys and do it more programmatically so any help would be appreciated!!
You may want to use Angular's KeyValuePipe.
Then, you can do something like this:
<div *ngFor="let item of prices | keyvalue">
{{item.key}} last: {{ item.value.last |json }} {{item.key}} sell: {{ item.value.sell |json }}
</div>
I think you can use Object.keys() on the object to return the key value.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
sorry for the noob question.
I created an http request and retrieved some pokemon data and put it in an object called pokemon, like so:
export class AppComponent implements OnInit{
title = 'Pokedex';
apiURL = 'https://pokeapi.co/api/v2/pokemon/1';
pokemon = {};
constructor(private http: HttpClient){}
ngOnInit(): void{
this.http.get(this.apiURL).subscribe(data =>{
const pokemon = {
name: data['name'],
id: data['id'],
abilities: data['abilities'].map( ability => ability['ability']['name']),
types: data['types'].map( type => type['type']['name']),
image: data['sprites']['front_default']
}
console.log(pokemon);
When I console log the object, it outputs in the console fine.
However, when I try to display it in an html {{ pokemon }} it just returns [object, Object]
How can I get around this?
I have tried the methods suggested below.
{{pokemon.name}}, {{pokemon[name]}} and {{pokemon?.name} display a blank page.
{{ pokemon | json }} returns an empty object, in the form of {}.
Am I perhaps doing something else wrong?
You need to use the json pipe
<pre>{{ pokemon | json }}</pre>
OR
<div> Id: {{ pokemon.id }} </div>
<div> Name: {{ pokemon.name }} </div>
<div> Abilities:
<ul>
<li *ngFor="let ability of pokemon.abilities"> {{ ability }}</li>
</ul>
</div>
<div> Types:
<ul>
<li *ngFor="let type of pokemon.types"> {{ types }}</li>
</ul>
</div>
call property as {{pokemon?.name}}
You can't use object directly. You have to access object properties by either . (Dot) notation or object[property] way.
In your case, if you want to use the property of name then use
{{ pokeman.name }}
or
{{ pokeman[name] }}
I am having trouble displaying data from querying an API endpoint. The error message is ERROR TypeError: Cannot read property 'name' of undefined. I understand that I have to jump to display the "matches" array but having a lot of difficulty doing so.
This is what the url returns:
{
"query": "An",
"matches": [
{"name": "Jane Hardman", "id": "248086622848468681706182205280565550732"},
{"name": "Gary Aldan", "id": "246529435182620212343890064029443600078"}
]
}
This is my meeting-handler.service.ts file:
constructor(private _httpClient: HttpClient) {}
getListOfEmployees(query: string = '') {
return this._httpClient.get(
`${this.meetingUrl}/employees?q=${query}`);
}
This is my meeting-form.component.ts file:
export class MeetingFormComponent implements OnInit {
employees;
constructor(private _meetingService: MeetingHandlerService) {
this._meetingService.getListOfEmployees('An').subscribe(
res => this.employees = res
)
}
And finally this is my meeting-form.component.html file:
<div *ngFor="let employee of employees"></div>
<p>{{ employee.name }}</p>
The name is inside this.employees.matches and you have to iterate on the matches field.
Can you try this :
<div *ngFor="let employee of employees?.matches.name"></div>
<p>{{ employee }}</p>
Can you try to edit your get request ?
return this.http.get(`${this.meetingUrl}/employees`, {
params: new HttpParams()
.set('q', query)
})
I checked your stackblitz and I found a typo here :
<div *ngFor="let employee of employees?.matches.name"></div>
<p>{{ employee.name }}</p>
Why are you using {{ employee.name }} ? You iterate on name so you employee is already a name.
Try this :
<div *ngFor="let name of employees?.matches.name"></div>
<p>{{ name }}</p>
<div *ngFor="let employee of employees">
<p>{{ employee.name }}</p>
</div>
Moved the closing tag.
For example, I have template index.html and custom_jinja2_filter
<h1> My name is {{ name }} </h1>
<h2> I'm {{ year }} years old </h2>
<p> I'd like to pass template context to custom
filter like single object. Is it possible?
{{ ??? | custom_jinja2_filter }}
</p>
def custom_jinja2_filter(context):
name = context['name']
year = context['year']
You can pass the current context to a function marked as callable with #contextfunction:
from jinja2 import contextfunction
#contextfunction
def custom_jinja2_filter(context):
name = context.name
year = context.year
return '(c) {} {}'.format(year, name)
The angularjs app doesn't show me any result.
It shows me :
Name City Order Total joined
{{ cust.name }} {{ cust.city }} {{ cust.orderTotal }} {{ cust.joined }}
What is the reason of this type of error !!!
Update 1:
function CustController($scope)
{
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [
{joined: '240-344-55', name:'jone', city:'usa', orderTotal:'231'},
{joined: '240-344-55', name:'jone', city:'usa', orderTotal:'231'},
{joined: '240-344-55', name:'jone', city:'usa', orderTotal:'231'}
];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
}
If you are using $scope approach, then you have to remove "cust." part from your view. It would be {{ name }} {{ city }} etc.
But if your view has ng-controller="CustController as cust", that means you are using "controller as" syntax, so you would need to refactor your controller code, changing $scope. to this. everywhere at least.