why is not working
Question
I want space added between firstname and lastname where are added. but when i run the code it doesnt adds space. I also tried adding tab sapce as well but its not rendering correctly. The character set is set to utf-8 as can be seen in the attached html
export class AppComponent implements OnInit { firstName: string; lastName: string; title: string; clicked: boolean; ngOnInit() { this.firstName = `John`; this.lastName = `Doe`; } printDetails(frstnm: HTMLInputElement, lstnm: HTMLInputElement, event: any): void { this.firstName = frstnm.value || this.firstName; this.lastName = lstnm.value || this.lastName; this.title = `First Name is: ${this.firstName} Last Name is: ${this.lastName}`; event.preventDefault(); this.clicked = true; } isVisible() { const classes = { display : this.clicked } return classes; } }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
3 answers
solution1
4 ACCPTED 2017-09-14 16:07:52
Using HTML in your title does not make sense. If you wanted to use then you'd have to render the title as HTML for it to render properly, but that also means if a user had any HTML in their name , it would be an issue. If I register for your site with FirstName: "a <b>name</b>" then it would render as bold alongside the spaces.
Instead you should leave it as normal text, and put an actual non-breaking space character in your code, using JS unicode escapes , instead of HTML escapes, eg use \
this.title = `First Name is: ${this.firstName}\u00A0\u00A0\u00A0Last Name is: ${this.lastName}`;
solution2
1 2017-09-14 16:02:30
I'm assuming this is Angular.
the spaces are not printing because should be rendered as HTML.
<div [innerHTML]="title"></div>
solution3
-1 2017-09-14 16:02:06
What if you simply add the space like this?
this.title = `First Name is: ${this.firstName} Last Name is: ${this.lastName}`;
(Notice the space between ...firstName} and Last... )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.