页面渲染后源中的角空格

Question

In an angular application I'm retrieving a list of addresses from a service that returns an object that looks like:

{ 
  Flat: "10B",
  BuildingName: "Some Building",
  Line: "10B Some Building Road Town POST CODE",
  Postcode: "POST CODE",
  Street: "Road",
  Town: "Town"
}

Once this data is passed into the controller I need to display the address as a single line with commas. I use a filter to add the commas (the values of Line is not useful here because it does not contain commas). Then the data is rendered in the html like so:

<a>{{ address.Flat | joinBy: ',' }} {{ address.BuildingName | joinBy: ',' }} {{ address.BuildingNumber }} etc...</a>

When one of the expressions contains and empty value (eg the address doesn't have a building name) then the ui just omits it so everything looks fine to the user. But the page source includes a additional whitespace where the empty expression is.

Logging the <a> element shows that it's outerHTML, innerHTML or innerText or text does not have any additional whitespace.

Because there are spaces between the expressions in the html, they are left in there when there is an empty expression.

Is there any way to strip the whitespace from the page source using angular, or should I just use vanilla js and run the string through a regex?

Answer 1

This was actually a simple fix and staring me right in the face. Empty expressions weren't leaving whitespace, I was adding that to include spaces between address parts.

I'm already using the joinBy filter that accepts any delimiter so I used this. The angular markup now looks like this:

<a>{{ address.Flat | joinBy: ', ' }}{{ address.BuildingName | joinBy: ', ' }} {{ address.BuildingNumber | joinBy: ' ' }} {{ address.Street }} etc...</a>

There shouldn't be a comma between building number and street so I just add a space that only renders if the building number exists.